flexbox

React native text going off my screen, refusing to wrap. What to do?

by

The following code can be found in this live example I’ve got the following react native element: ‘use strict’; var React = require(‘react-native’); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.descriptionContainerVer}> <View style={styles.descriptionContainerHor}> <Text style={styles.descriptionText} numberOfLines={5} > Here is a really … Read more

100% width in React Native Flexbox

by

I have already read several flexbox tutorial, but I still cannot make this simple task to work. How can I make the red box to 100% width? Code: <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Natives </Text> <Text style={styles.line1}> line1 </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{‘\n’} Cmd+D or shake for dev menu </Text> </View> … Read more

Keep the middle item centered when side items have different widths

by

Imagine the following layout, where the dots represent the space between the boxes: [Left box]……[Center box]……[Right box] When I remove the right box, I like the center box to still be in the center, like so: [Left box]……[Center box]…………….. The same goes for if I would remove the left box. …………….[Center box]…………….. Now when the … Read more

ReactNative: how to center text?

by

How to center Text in ReactNative both in horizontal and vertical? I have an example application in rnplay.org where justifyContent=”center” and alignItems=”center” is not working: https://rnplay.org/apps/AoxNKQ The text should being centered. And why is there a margin at the top between the text (yellow) and parent container? Code: ‘use strict’; var React = require(‘react-native’); var … Read more