I make check box list on Model Pop up by using react native multiple select
checkbox list listed but it take full screen height
i am not able to fix this issue
please Any body help me
Outer Element would be a modal, then make a view of a specific height inside that modal,
Example
<Modal transparent={true}
visible={this.state.showDialog}
animationType='fade'>
<View style={{opacity:.5, backgroundColor:'black',flex:1}}/>
<View
style={{position:'absolute',padding:16,top:0,bottom:0,left:0,right:0
,justifyContent:'center',alignContent:"center",
alignItems:'center'}}>
<View style={{backgroundColor:’red’,padding:16,borderRadius:5,
width:'60%',height:'10%',alignContent:'center',alignItems:'center',justifyContent:'center'}}>
<Text style={{fontSize:14,alignSelf:'center',textAlign:'center'}}>
Sorry!!
</Text>
<Text style={{marginTop:5,fontSize:12,alignSelf:'center',textAlign:'center',color:’black’}}>
{this.props.errorMessage}
</Text>
<Button title='close'
onPress={()=>this.setState({showDialog:false})}/>
</View>
</View>
</Modal>
Related
Hello guys i have been working on the ubereats clone and while using scrollView it doesnt work ,
i used it on other components the same way and it worked fine but here it doesnt !! ?
const MenuItem=()=>{
return(
<ScrollView showsVerticalScrollIndicator={false}>
<View style={{paddingHorizontal:10}} >
{Menu.map((food,index)=>(
<View style={{paddingLeft:20,flexDirection:"row",marginTop:30,borderTopWidth:1,borderTopColor:"lightgray",paddingTop:10}} key={index} >
<View style={{justifyContent:"center"}}><BouncyCheckbox
iconStyle={{borderColor: "gray",borderRadius:0}}
fillColor='green'
/></View>
<View style={{width:220,marginLeft:10}}>
<Text style={{fontSize:20,fontWeight:"700"}}>{food.title}</Text>
<Text > {food.description}</Text>
<View style={{marginTop:8}}>
<Text style={{fontSize:17,fontWeight:"500"}}>{food.price}</Text></View>
</View>
<View style={{marginLeft:18}}>
<Image source={{uri:food.image}} style={{width:80,height:80,borderRadius:30}}/>
</View>
</View>
))}
</View>
</ScrollView>
)
}```
i used flex 1 on the view outside the map function and it didnt fix it
Remove the View above the ScrollView.
You try to set one child for the scrollView it’s the View component and the View component have array map.
Remove the View component to keep array map child for ScrollView
I'm a new react native developer and I have an issue with TouchableHighlight where it always shows an error "Error: React.Children.only expected to receive a single React element child." in addition while I remove it is work as usual and I assume if this issue come from my device/vscode/browser. Because I already follow the source code from https://reactnative.dev/docs/touchablehighlight but still show that error.
Error image
Image without TouchableHighlight tag
Here my code
render() {
return (
<View style={styles.container}>
<TouchableHighlight onPress={this.onPress}>
<View style={styles.button}>
<Text>Touch Here</Text>
</View>
</TouchableHighlight>
<View style={[styles.countContainer]}>
<Text style={[styles.countText]}>
{this.state.count ? this.state.count : null}
</Text>
</View>
</View>
);}
From the error message, the issue might happen if you pass Mutlipe child components to TouchableHighlight
From the docs:
TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View
<TouchableHighlight onPress={onPress}>
<View style={styles.button}> // Mutlipe child components are wrapped in a View
<Text>Touch</Text> // component 1
<Text>Here</Text> // component 2
</View>
</TouchableHighlight>
enter code hereI want to show a toast when my modal is visible in my react native project.
I use react-native-modal.
I have a button in modal when i press it should show up a toast
I don't want to put my toast tag inside the modal tag
what should i do???
render(){
return(
<>
<Modal visible={this.state.visible}>
<Toast
ref="toast"
style={{backgroundColor:'red'}}
position='bottom'
positionValue={100}
fadeInDuration={1000}
fadeOutDuration={1000}
opacity={0.8}
textStyle={{color:'blue'}}
/>
<SafeAreaView style={{flex:1}}>
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<TouchableOpacity onPress={()=>this.refs.toast.show('hello world!')} style={{height:200,width:100,justifyContent:'center',alignItems:'center',backgroundColor:'blue'}}>
<Text>Modal Button</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</Modal>
<SafeAreaView style={{flex:1}}>
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<TouchableOpacity onPress={()=>{this.setState({visible:true})}} style={{height:100,width:100,justifyContent:'center',alignItems:'center',backgroundColor:'red'}}>
<Text>button</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</>
)
}
Actually i wanna be my toast out of my Modal tag but it show in top of screen when modal is visible
react native modal is a native view, so impossible to be covered by a js component.
I’m writing a React Native app and I want to detect tap/clicks anywhere on the screen so I put an onClick handler on my <View> element but it doesn’t seem to be working. Here is my render function:
<View style={styles.container} onClick={this.onClick}>
<Text style={styles.welcome}>
Tap to change the background
</Text>
</View>
What do I need to do?
For making any element to handle touch/click events in a React-Native UI, you need to put the element inside a TouchableOpacity, TouchableWithoutFeedback, TouchableNativeFeedback or TouchableHighlight element:
<TouchableHighlight onPress = { this.onClick }>
<View style={styles.container}>
<Text style={styles.welcome}>
Tap to change the background
</Text>
</View>
</TouchableHighlight>
Hope that helps.
In React Native version > 55.3 you make check onPress events into your View if use onStartShouldSetResponder props.
Like example:
<View
style={{ flex: 1 }}
onStartShouldSetResponder={() => console.log('You click by View')}
>
<ScrollView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this.onRefresh} />
}
>
<Text>Awesome</Text>
</ScrollView>
</View>
In example I showed how you can get onPress event on View and not blocking other event behind them. Refresh control still work correct.
In my case the following works fine. You can use onTouchStart and onTouchEnd handlers on any View via props, for example:
<View onTouchStart={() => this.doSomething()} />
More information
This worked for me...
onTouchEnd={() => alert('TAPPED')}
The easiest way to do that:
<TouchableOpacity style={styles.container} onPress={()=> whateverFunc(parameter)}>
<Text style={styles.welcome}>
Tap to change the background
</Text>
</TouchableOpacity>
So, you need to replace the 'View' component to a 'TouchableOpacity' or any other Touchable component and you also need to replace the 'onClick' prop to 'onPress'. That's all. The wrapping of a view with a TouchableWhatever component is not necessary at all.
When I wrap content like this example below, it scrolls Perfectly..
return(
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</ScrollView>
);
However, whenever I wrap it in another View, It will not scroll.
return(
<View>
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</SCrollView>
</View>
);
Is there some sort of fix to this. I am trying to put a nav bar header above all of the content, couldn't really figure it out though.
It's a typo:
Your closing ScrollView tag is: </SCrollView> rather than </ScrollView>.
You also need to add a style to the View container, here's an example of what it should look like:
return(
<View style={{flex: 1}}>
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</ScrollView>
</View>
);
Try next code:
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
</ScrollView>
If your ScrollView is within something that handles touch (Pressable, TouchableWithoutFeedback etc) then you either need to stop the touch event propagating up to that parent handler or else the ScrollView won't handle the touch event and therefore won't scroll.
This can be done either with onStartShouldSetResponder={() => true} or by wrapping the children in an element which itself handles the touch event (e.g. Pressable):
return (
<ScrollView>
<Pressable>
<Text>This is scrollable</Text>
<Pressable>
<Pressable>
<Text>As is this</Text>
<Pressable>
</ScrollView>
);
Try adding style={{flex:1}} to <View> and <ScrollView> components. You also have a typo on your code: </SCrollView> in line 9. An example code will look like this:
<View style={{backgroundColor:'white', flex:1}}>
<NavigationBar title="Title" />
<ScrollView style={{flex:1, backgroundColor:'white'}}>
<View style={{flex:1,justifyContent:'center'}}>
<RegisterForm />
</View>
</ScrollView>
</View>
Another solution is to add a height property to the parent View container. This sometimes works well when calculating the height against the screen height.
render () {
const screenHeight = Dimensions.get('window').height
return(
<View style={{height: screenHeight}}>
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</ScrollView>
</View>
)
}
I have tried all of these solutions and none were working. Then I just fully restarted the app and the metro server and everything worked fine.
As #Evan Siroky has answered above it's working well I'm just adding on thing for a auto height in case you don't want to reserve the space
render () {
const screenHeight = Dimensions.get('window').height
return(
<View style={{ Height: "auto", maxHeight: screenHeight}}>
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</ScrollView>
</View>
)
}
I had a similar issues, it got solved by removing height/width if set to '100%'.
Just adding here if someone faces the same issues. :D
Set nestedScrollEnabled as true for Hybrid Android + react app as it might be issue with gesture/click for scrolling issue.
Just if anyone is as desperate as I was:
My view was inside a StackNavigator. In the StackNavigator you can assign a default cardStyle. This card style needs height: "100%".
For me this was the case but I had overwritten it within the cardStyle of the Stack.Screen definition.
See this working example:
// This is the stack navigator
<ModalStack.Navigator screenOptions={() => ({
cardStyle: {height: "100%"}
});}}>
<ModalStack.Screen name={ScreenItemDetail} options={{
// cardStyle: {} be sure to not override card style again!
}} component={ItemDetailScreen} />
// ...
</ModalStack.Navigator>
removing contentContainerStyle prop from the ScrollView has fixed the issue for me
Just add ScrollView as parent View if it's still not working for you...just restart your app or server and your ScrollView will work fine. Because sometimes our app freezes for no reason.
I think the best way of doing this is to put all requires inside an array and map this array.
const images = [
require('../your/path/here'),
require('../other/image/here'),
...
];
return ( {images.map((image) => <Image ... source={image} />)
note that if you want it as a background image with other elements above the image, you may use BackgroundImage and either render elements for each image or position absolute the image map and zIndex it behind all things