We Keep Coding

React Native - How to set width of Views inside ScrollView to fit?

I have multiple Views inside my horizontal ScrollView. How can I set them such that each of those views has the exact dimensions as that of the ScrollView?
I want to use paging and go to my next View inside the ScrollView on swiping. I have tried to use width : "100%" but it does not work as ScrollView does not have fixed dimensions, but that is basically what I want to do with the views inside it. Here is my code:
export default class HorizontalScrollView extends Component {
render () {
screenWidth = "100%"
return (
<ScrollView
contentContainerStyle={styles.scrollable}
horizontal={true}
snapToInterval={screenWidth}
decelerationRate={"fast"}
>
<View style={StyleSheet.compose(styles.insideContainer, {"width" : screenWidth, "backgroundColor" : "red"})}>
<Text>Screen 1</Text>
</View>
<View style={StyleSheet.compose(styles.insideContainer, {"width" : screenWidth, "backgroundColor" : "blue"})}>
<Text>Screen 3</Text>
</View>
<View style={StyleSheet.compose(styles.insideContainer, {"width" : screenWidth, "backgroundColor" : "green"})}>
<Text>Screen 2</Text>
</View>
</
StyleSheet:
styles = StyleSheet.create({
"scrollable" : {
"backgroundColor" : "black",
"height" : "100%"
},
"insideContainer" : {
"alignItems" : "center",
"justifyContent" : "center",
"flex" : 1,
}
})
P.S. - I am using an Android Samsung Galaxy M30 to test this.
Any help or explanation would be appreciated.
Thank you.

Based on your code use these styles to accomplish what you want
<ScrollView horizontal={true} snapToInterval={Dimensions.get('screen').width} contentContainerStyle={{minHeight: '100%'}}>
<View style={{flexDirection: 'row'}}>
<View style={{width: Dimensions.get('screen').width, height: Dimensions.get('screen').height, backgroundColor: 'green'}}>
<Text>Screen 1</Text>
</View>
<View style={{width: Dimensions.get('screen').width, height: Dimensions.get('screen').height, backgroundColor: 'red'}}>
<Text>Screen 2</Text>
</View>
<View style={{width: Dimensions.get('screen').width, height: Dimensions.get('screen').height, backgroundColor: 'yellow'}}>
<Text>Screen 3</Text>
</View>
</View>
</ScrollView>

If your scroll view is the width of the screen, you can set each view inside to have a width of
Dimensions.get(“screen”).width
Then set the pagingEnabled prop of the ScrollView to true and you should have a paging scroller with full width sub views.

i need to give two clicks when the keyboard is open -- React native

I have a project in react native, i created a view that it has a button, when the user does not open the keyboard, he only gives a click, but if the keyboard opens, the user needs to gie two clicks, because when the user click at button is nos functioned. It should be hidding.
Someone knows how the click can function, if the keyboard is open.
The code is the next
return (
<ScrollView>
<View style={LoginStyles.container_login}>
<View style={LoginStyles.container_detail}>
<View style={LoginStyles.container_components}>
<View style={LoginStyles.container_image}>
<Image
style={LoginStyles.container_display_image}
source={logo}/>
</View>
<TextInput style={LoginStyles.container_user} placeholder = {labelApp.holderUser} onChangeText={(user) => this.checkDataEmail(user)}/>
<TextInput secureTextEntry={true} style={LoginStyles.container_password} placeholder = {labelApp.holderPassword} onChangeText={(password) => this.checkDataPassword(password)}/>
<TouchableOpacity disabled={ this.state.disabled }
style={this.state.disabled ? LoginStyles.button_disabled: LoginStyles.button_login}
onPress={this.handleClickBtnEnter}
>
<Text style={LoginStyles.text_button_login}>
{labelApp.textButtonLogin}
</Text>
</TouchableOpacity>
<Text
style={LoginStyles.text_forgot_password}
onPress={this.handleClickBtnEnter}
>
{labelApp.textForgotUser}
</Text>
<Text
style={LoginStyles.text_register}
onPress={this.handleClickBtnEnter}
>
{labelApp.textRegister}
</Text>
<View style={LoginStyles.container_image_share}>
<Image style={LoginStyles.container_display_share}
source={facebook}/>
<Image style={LoginStyles.container_display_share}
source={google}/>
</View>
<View style={LoginStyles.container_image}>
<Image
style={LoginStyles.container_display_register}
source={register}/>
</View>
</View>
</View>
</View>
</ScrollView>
);
The event is on TouchableOpacity

Try setting the keyboardShouldPersistTaps value on your ScrollView to handled, like this:
return (
<ScrollView keyboardShouldPersistTaps='handled'>
...
</ScrollView>
);

React Native ScrollView disappears child component

I have this code:
<View style={{flex:1}}>
<ScrollView>
<View style={{flex:0.25,elevation:2,marginVertical:5}}>
<MoviesChild/>
</View>
<View style={{flex:0.75}}>
<FlatList
data={ListOfMovies}
renderItem={this.renderData.bind(this)}
keyExtractor={(x, i) => x.id}
extraData={this.state}
/>
</View>
</ScrollView>
</View>
The problem is, my FlatList's data appears but my child component MoviesChild disappears. Maybe Flatlist overlaps the child component. Could someone figure out where I'm doing a mistake please?

You should give style to ScrollView with flexGrow:1

I suggest you not to use FlatList inside a ScrollView, 'cause FlatList scroll itself. So, in order to achieve your objective, wrap your first View in a function and pass it to the ListHeaderComponent property of your FlatList, like this:
<View style={{flex:1}}>
<View style={{flex:0.75}}>
<FlatList
data={ListOfMovies}
renderItem={this.renderData.bind(this)}
keyExtractor={(x, i) => x.id}
extraData={this.state}
ListHeaderContainer={this.renderHeader}
/>
</View>
</View>
where
private renderHeader = () => {
return(
<View style={{flex:0.25,elevation:2,marginVertical:5}}>
<MoviesChild/>
</View>
)
}
I hope this can fix your issue!
You can find what I'm talking about on the official doc

Try this,
<View style={{flex:1}}>
<View style={{ flex:0.25,elevation:2,marginVertical:5 }}>
<MoviesChild/>
</View>
<FlatList
style={{flex:0.75}}
data={ListOfMovies}
renderItem={this.renderData.bind(this)}
keyExtractor={(x, i) => x.id}
extraData={this.state}
/>
</View>

How to apply background color to View without giving any padding?

I have already tried backgroundColor but for no success.
I have the following code and want to apply background color to the main parent View but dont want to specify any padding, how to acheive this?
<View style={{flex:1,alignItems:'center'}}>
<Text>
No new Transactions
</Text>
<View style={{backgroundColor:'#fc004f',paddingTop:44,paddingBottom:40,top:56,borderRadius:8,width:window.width-20,borderWidth:2,borderColor:'#dddddd'}}>
<Text style={{position:'absolute',fontSize:16,top:14,paddingLeft:16,color:'white',fontWeight:'bold'}}>Big Bazaar</Text>
<Text style={{position:'absolute',fontSize:14,top:48,paddingLeft:16,color:'white',fontWeight:'bold'}}>View Receipt</Text>
</View>
<View style={{flex:1,backgroundColor:'#401f80',padding:44,top:56,borderRadius:8,width:window.width-20,borderWidth:2,borderColor:'#dddddd',marginTop:10}}>
<Text style={{position:'absolute',fontSize:16,top:14,paddingLeft:16,color:'white',fontWeight:'bold'}}>Zomato Inc</Text>
<Text style={{position:'absolute',fontSize:14,top:48,paddingLeft:16,color:'white',fontWeight:'bold'}}>View Receipt</Text>
</View>
<View style={{flex:1,backgroundColor:'#fc004f',padding:44,top:56,borderRadius:8,width:window.width-20,borderWidth:2,borderColor:'#dddddd',marginTop:10}}>
<Text style={{position:'absolute',fontSize:16,top:14,paddingLeft:16,color:'white',fontWeight:'bold'}}>OLA Inc</Text>
<Text style={{position:'absolute',fontSize:14,top:48,paddingLeft:16,color:'white',fontWeight:'bold'}}>View Receipt</Text>
</View>
</View>

Remove flex:1 from the children views, and add backgroundColor to the parent view. Hope this helps!

react-native chat app "split" chat bubble

I`m working on a chat app and I use gifted chat .
I want my bubble to contain both text and an image. That works fine but I'm not satisfied with the way it is split...
I want to have text on the left and the image on the right side.
Currently, my text is above the image:
This is the code for the content of the bubble:
<TouchableOpacity key={i} style={[styles.mapView, this.props.mapViewStyle]}>
<View>
<Text style = {styles.titleText}> {title}</Text>
<Image style={[styles.image, this.props.imageStyle]} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>
</View>
</TouchableOpacity>
Any ideas on how I can achieve text on the left and the image on the right?

You need flexDirection on View: https://facebook.github.io/react-native/docs/flexbox.html#flex-direction
The default value is column so children are stacked vertically.

You need to use flex in View https://facebook.github.io/react-native/docs/flexbox.html You can also give desired alignment to text and image. By default direction is column so use flexDirection:'row'
Use the code below.
<TouchableOpacity key={i} style={[styles.mapView, this.props.mapViewStyle]}>
<View style={{flex:1,flexDirection:'row'}}>
<View style={{flex:0.5}}>
<Text style = {styles.titleText}> {title}</Text>
</View>
<View style={{flex:0.5}}>
<Image style={[styles.image, this.props.imageStyle]} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>
</View>
</View>
</TouchableOpacity>