Develop Reference

Text seems to disappear when reaches a certain size

I have a small component and I seem to have an issue with the font size. When the fontSize is 179 the text loads correctly. When the font size is 180 and above it seems to vanish.
return (<View style={{flexDirection:'row'}}>
<Text numberOfLines={1} style={{
textAlignVertical: "center",
fontSize: 179,
textAlign: "center",
backgroundColor:'rgba(0,0,0,0)',
color:'rgba(0,0,0,.3)',
flex: 1,
flexWrap: 'wrap',
}}>A</Text>
</View>);
I can still see the element in dev tools:
Has anybody come across this before?
Am I just missing something?
Thanks, James

You shouldn't have numberOfLines={1} and flexWrap together; They contradict each other.
If you want it the text to wrap around, remove numberOfLines or have it be more than 1.
If you don't want text to wrap remove flex and flexWrap properties from the style object.
What is your goal with those styles? I recommend you start with unstyled (default) styled . Add styles one by one and see what works or doesn't work to give you your desired results.

Rendering equal width buttons in React Native

I want to render 7 buttons in a row with equal width to fill up all the available space horizontally.
render() {
return (
<FlatList
data={this.state.days}
renderItem={({ item }) => <View style={styles.button}><Button title={item.getDate().toString()} /></View>}
keyExtractor={item => item.getDate().toString()}
horizontal={true}
style={styles.list}
/>
);
}
const styles = StyleSheet.create({
list: {
display: 'flex'
},
button: {
flex: 1
}
});
They are inside a flatlist, wrapped in a view because I cannot style buttons directly.
In regular flexbox in an HTML page this approach works.
This what I get in React Native:
Maybe there are some flatlist behaviour I'm not familiar with?

First of all when you are styling in react native everything is already in flex so you don't have to do display : flex
If you want to render 7 buttons with the same width in a row make sure that all of them have the same parent. Then use flex:1 in each one of them.
What is happening when you do flex:1 when you put a number in front of flex in your styles in this particular situation it divides your parent into those many parts and give it to the child.
So all your button will have 1/7th of the width. If you put flex:2 in one of the styles then that button will have 2/7th of the width and the rest will have 1/7th.
Please feel free to ask for more clarity on the above said.

I got the same issue, I have added View component cover for each Button like the code below:
<View style={{flexDirection:"row"}}>
<View style={{flex:1}}>
<Button title="Add" />
</View>
<View style={{flex:1}}>
<Button title="Clear" />
</View>
//....
</View>

Have you tried adding flex: 1 to the list so that it takes up the entire horizontal space?

in my point of view, try adding justifyContent as space-between in the style object list

in each item ,set this style:
width:width/7

Overlapping views inside a parent container - React Native

I am building a home project in react-native. While playing with layouts, Views inside a parent container are overlapping. I am using flexbox for designing layout of a form, but unable to get through it. Below is sample code that I have written to explain what issue is.
<View style= {styles.Container}>
<View style={{flex:1, backgroundColor:'red'}}><Text>RED</Text></View>
<View style={{flex:1, backgroundColor:'green'}}><Text>GREEN</Text></View>
<View style={{flex:1, backgroundColor:'blue'}}><Text>BLUE</Text></View>
</View>
Container: {
flex:1,
backgroundColor:'grey',
flexDirection:'column',
}

With the part of your code which you posted nothing is wrong. Perhaps there's something wrong in the parts you didn't provide.
Here's your code in a working example: https://repl.it/Iqek

Align two children differently in react native

I'd like to have a header with a back button to the left and a text/title in the center of the header.
Like this:
<View style={styles.topbar}>
<TouchableOpacity>
<Text style={styles.topbarButton}>{" <"}</Text>
</TouchableOpacity>
<View>
<Text style={styles.topbarText}>Title</Text>
</View>
</View>
I'm trying to use flex in styles.topbar but nothing of what I tried seems to work.
I am pretty new to flex and React Native so some help with the styles would be great.
Thanks all.

Here we go:
<View style={{width:devicewidth,flexDirection:'row',height:40,top:0,position:'absolute'}}>
<TouchableOpacity style={{left:0,position:'absolute',alignItems:'flex- start'}}>
<Text style={styles.topbarButton}>{" <"}</Text>
</TouchableOpacity>
<View style={{justifyContent:'center'}}>
<Text style={styles.topbarText}>Title</Text>
</View>
</View>
The above code will print back button at the top left and text at the center. Flex direction is used to indicate view to print in a row direction.

How to create button with icon using react-native?

How to create button like this:
using react-native?

There are a lot of ways to answer this question, depending on what else you have going on in your application. The one thing I've found that is important when styling in React Native is understanding the FlexBox properties, which will allow you to do pretty much any layout you can imagine once you learn them.
I've gone ahead and set up a sample project here with a button similar to the one above implemented in code, and I've also posted the code below. Note that there are a ton of ways to achieve this, this is just one of the many ways.
https://rnplay.org/apps/yNKoGA
<TouchableHighlight underlayColor="#ededed" style={{borderRadius:10, height:60, borderWidth:1, marginLeft:80, marginRight:80}}>
<View style={{flexDirection: 'row', }}>
<View>
<Image style={{marginTop:9, marginLeft:4,width:40, height:40}} source={{uri: 'http://www.iconpng.com/png/iconographicons/basketball19.png'}} />
</View>
<Text style={{ fontSize:20, marginLeft:10, marginTop:16 }}>Login</Text>
</View>
</TouchableHighlight>