Develop Reference

React Native child view not getting 100% width, when parent view has flexDirection ="row

<View style={{flexDirection: 'row', backgroundColor: 'yellow'}}>
<TouchableOpacity
style={{
padding: 5,
borderWidth: 1,
backgroundColor: 'pink',
}}>
<Text style={styles.goldenText}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
padding: 5,
borderWidth: 1,
backgroundColor: 'pink',
}}>
<Text style={styles.goldenText}>Cancel</Text>
</TouchableOpacity>
</View>
My parent view has flexDirection="row". I need my child components to take the entire width of parent view dynamically.
ie, if there are 3 child components i need it to be divided equally, in the yellow region without margin between them. Tried width, flex etc
but nothing seems to be working..

Have a try by flex: 1 in the parent style.
For Example:
<View style={{flex: 1, flexDirection: 'row', backgroundColor: 'yellow'}}>

I fixed this issue.
After a bit of research I found that , when parent view has flexDirection:"row"
the flex inside the touchableopacity(child component) doesn't works.
I replaced TouchabllOpacity with pressable and now flex gets applied properly.
<View
style={{
flexDirection: 'row',
backgroundColor: 'yellow',
}}>
<Pressable
style={{
padding: 5,
borderWidth: 1,
backgroundColor: 'pink',
flex: 1,
}}>
<Text style={styles.goldenText}>Cancel</Text>
</Pressable>
<Pressable
style={{
padding: 5,
borderWidth: 1,
backgroundColor: 'pink',
flex: 1,
}}>
<Text style={styles.goldenText}>Cancel</Text>
</Pressable>
<Pressable
style={{
padding: 5,
borderWidth: 1,
backgroundColor: 'pink',
flex: 1,
}}>
<Text style={styles.goldenText}>Cancel</Text>
</Pressable>
</View>

React-Native Horizontal Scrollview not working but works well with vertical

I am new to react-native. I want to achieve a horizontal scrolling of list. When added horizontal the scrolls won't work. But it works well went removed horizontal={true}.
Below is the code.
<View style={styles.headerMargin} >
<ScrollView
horizontal={true}
style={{ marginLeft: 15, marginRight: 15 }}
contentContainerStyle={{
justifyContent:
this.state.typeofCountry.length > 2
? 'flex-start'
: 'center',
width: '100%',}}
>
{this.state.typeofCountry.map((item, i) => {
return (
<View
style={{
flexDirection: 'row',
alignContent: 'center',
alignSelf: 'center',
alignItems: 'center',
}}>
<Text
style={[
styles.textBlacRegular,
{ marginLeft: i == 0 ? 0 : 10 },
]}>
{item.label}
</Text>
<View style={{ justifyContent: 'center' }}>
<Image
style={{
width: 30,
height: 18,
marginLeft: 10,
marginRight:20,
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
}}
source={item.icon}></Image>
</View>
</View>
);
})}
</ScrollView>
</View>
Styles:
headerMargin:{
flexDirection:"row",
width:'100%',
marginTop:6,
marginBottom:5,
height:30,
borderColor:"#2795FF",
borderBottomWidth:1.5,
alignSelf:"center",
justifyContent:"center",
alignItems:"center",
alignContent:"center",
paddingBottom:5
}
Can anyone let me know what wrong with the code.
The above code works well in iOS but not in android.

Straight from React Native docs, for the scroll view's children to be arranged horizontally in a row instead of vertically in a column the only prop you need to use it's horizontal.
<ScrollView horizontal>
<Child/>
</ScrollView>

Add a horizontal prop to the ScrollView component like so:
<ScrollView horizontal={true}> </ScrollView>
You can also use a FlatList and use the same horizontal prop on it too.

React Native - Sliding up Panel does not work on android

Does Anyone knows why the panel is not showing on android when I click on the button?
I'm using https://www.npmjs.com/package/rn-sliding-up-panel btw. Please feel free to tell me, if you have any other recommended sliding panel library.
const CCTVTab = () => {
return (
<React.Fragment>
<View
style={{
flex: 1,
marginTop: 30,
flexDirection: 'column',
justifyContent: 'center',
alignContent: 'center',
}}>
<Button title="Show panel" onPress={() => _panel.show(300)} />
</View>
<SlidingUpPanel
style={{borderTopLeftRadius: 10}}
ref={c => (_panel = c)}>
<View
style={{
flex: 1,
backgroundColor: 'black',
alignItems: 'center',
borderTopRightRadius: 18,
borderTopLeftRadius: 18,
}}>
<Text>Header</Text>
<Text>Content</Text>
<Button title="Hide" onPress={() => _panel.hide()} />
</View>
</SlidingUpPanel>
</React.Fragment>
);
};

"malformed calls from JS field sizes are different" error on Android - react-native

I'm using React-Native.I'm living trouble with Picker component on Android. I use Picker from Native-Base Library.
Here is my Picker code with it's parent view.
<View style={{height: 40, marginTop: 20}}>
<Label style={{fontWeight: 'bold', color: '#d7d7d7'}}>Phone</Label>
<View style={{flexDirection: 'row',width: '100%',borderWidth: 1, borderColor: '#d7d7d7', height: 40}}>
<View style={{flexDirection: 'row',width: '30%', height: '100%' ,backgroundColor: '#d7d7d7', alignItems: 'center'}}>
<Picker style={{width: 100, height: '100%', marginLeft: 5}}
selectedValue={this.state.selectedCountry}
onValueChange={(value)=>this.onCodeChanged(value)}>
<Picker.Item label={<Text style={{alignItems: 'center', flexDirection: 'row'}}>
<Thumbnail square style={{width: 30, height: 20, marginTop: 5}} source={require('../assets/+90.png')}/> +90</Text>} value="+90"/>
<Picker.Item label={<Text style={{alignItems: 'center', flexDirection: 'row'}}>
<Thumbnail square style={{width: 30, height: 20, marginTop: 5}} source={require('../assets/+44.png')}/> +44</Text>} value="+44"/>
<Picker.Item label={<Text style={{alignItems: 'center', flexDirection: 'row'}}>
<Thumbnail square style={{width: 30, height: 20, marginTop: 5}} source={require('../assets/+1.png')}/> +1</Text>} value="+1"/>
</Picker>
</View>
<Input keyboardType={'numeric'} style={{width: '70%', height: '100%'}} value={this.state.phone} onChangeText={(value)=>this.setState({phone: value},()=>console.log("Phone State: ", this.state.phone))}/>
</View>
</View>
Here is how Picker looks like in IOS
And here is the error screen I get on android.
It seems the problem is Picker.Item's Labelcontent. When I changed the content of label from Text to usual, ordinary string, it works fine on android, as well. But, somehow I need the flag and code together in Picker.Item
I hope there is someone who faced & handled this issue before.

React Native image and other components does not respect bounds (Such as padding)

I have recently started using React-Native, and one of the main issues I have been struggling with is the layout design.
I have a "Card" like component that holds some information about movies. Components like Image and Text that are big goes out of the bounds of the card and does not respect the padding and margins provided.
Here is the JSX code:
<View style={[styles.container, styles.card]}>
<View style={{alignSelf: 'stretch', flexDirection: 'row', padding: 10}}>
<Image style={{height: 50, width: 50, borderRadius: 25}}
source={require('../../img/sarah-avatar.png.jpeg')}/>
<View style={{flexDirection: 'column', marginTop: 5, marginLeft: 15}}>
<Text style={styles.title}>{ this.state.movie.name }</Text>
<Text style={{color: 'gray'}}>{ moment(this.state.movie.releaseDate).format('DD/MM/YYYY') }</Text>
</View>
</View>
<View style={{alignItems: 'center'}}>
<!-- THIS IMAGE DOES NOT RESPECT THE CARD BOUNDS -->
<Image style={{height: 220, resizeMode: 'center'}}
source={require('../../img/advance-card-bttf.png')}/>
<View style={{flexWrap: 'wrap', marginTop: 10, marginBottom: 20}}>
<Text style={{color: 'gray', fontSize: 14}}>
{ this.state.movie.summary }
</Text>
</View>
</View>
<View style={{flexDirection: 'row', flex: 1}}>
<Button onPress={this.onLikeClick.bind(this)}>
<View style={{flexDirection: 'row'}}>
<Icon name="thumbs-up" size={18} color="#007aff" />
<Text style={{color: '#007aff', marginLeft: 5}}>{ this.state.movie.likes } Likes</Text>
</View>
</Button>
<View style={{width: 20}} />
<Button onPress={this.onCommentClick.bind(this)}>
<View style={{flexDirection: 'row'}}>
<Icon name="comment" size={18} color="#007aff" />
<Text style={{color: '#007aff', marginLeft: 5}}>{ this.state.movie.comments.length } Comments</Text>
</View>
</Button>
</View>
<Comments comments={this.state.movie.comments }
showComments={ this.state.showComments }
handler={this.handler} />
</View>
const styles = StyleSheet.create({
card: {
backgroundColor: "#fff",
borderRadius: 2,
shadowColor: "#000000",
shadowOpacity: 0.3,
shadowRadius: 1,
shadowOffset: {
height: 1,
width: 0.3,
},
padding: 10,
flexWrap: 'wrap'
},
container: {
flex: 1,
backgroundColor: '#F5FCFF',
margin: 5
},
title: {
fontSize: 20,
backgroundColor: 'transparent'
},
button: {
marginRight: 10
}
});
And the comments component JSX code:
<View style={{flexDirection: 'column'}}>
{
this.props.comments.map((comment, index) => {
return (
<View key={index} style={{flexDirection: 'row', marginTop: 20}}>
<Image style={{height: 50, width: 50, borderRadius: 25}}
source={require('../../img/avatar-ts-woody.png')}/>
<View style={{flexDirection: 'column', marginLeft: 15, marginTop: 3}}>
<Text style={{fontSize: 18}}>{ comment.name }</Text>
<!-- THE COMMENT CONTENT GOES OUTSIDE OF THE CARD -->
<Text style={{color: 'gray'}}>{ comment.content }</Text>
</View>
</View>
)
})
}
<TextInput placeholder="Leave a comment"
value={this.state.commentContent}
onChangeText={(text) => this.setState({commentContent : text})}
onSubmitEditing={this.onCommentEntered.bind(this)}
style={{height: 40, marginTop: 18}} />
</View>
Here you can see that the cover image seems like it's out of the card:
In here each comment might start correctly inside the card, but will go outside of the bounds when text is too long: