I need to put two components at two ends of the screen. Following is my code.
<View style = {{flexDirection:"row"}}>
<Text>cancel</Text>
<Text style={{justifyContent:"flex-end",alignItems:"flex-end"}}>cancel</Text>
The two buttons are near to each other and I want to push the second button to the extreme right end of the screen without margin, how to do it by properties? It is not working currently. Thank you.
You need to do something like this
<View style={{flex:1,flexDirection:"row",justifyContent:"space-between"}}>
<View style={{flex:0.5}}>
<Text>Cancel 1</Text>
</View>
<View style={{flex:0.5,alignItems:"flex-end"}}>
<Text>Cancel 2</Text>
</View>
</View>
Related
how do I create a vertical progress path in React Native? Please refer to the first image below for the current design that I have and to the second image below for the output that I want (I want it with lines).
Here is a clearer example from Google
I managed to solve this in two ways. My first idea was to have for every step (row) two elements, one for the indicator and one for the actual information for the step. This solution has some spacing issues but still isn't that bad. To fix the spacing issues I came up with solution number two.
Solution 1 - absolute position the line
return (
<View style={styles.stepContainer}>
{/* the first element for the indicator and the line */}
<View style={styles.stepIndicator}>
{i < steps.length - 1 ? <View style={styles.stepLine}></View> : null}
<Text style={styles.stepIndicatorText}>{i + 1}</Text>
</View>
{/* the second element for the actual step and its information */}
<View style={styles.step}>
<Text>{step.name}</Text>
</View>
</View>
);
The idea here is to push the stepLine down by x and don't render the line on the last step since that will cause some overflow.
This approach works quite well but the issue comes when you're trying to add spacing to the steps, e.g. marginBottom. The line won't connect anymore since it is limit by the height of their row. You could hard code the amount of spacing to the height of the line but that gets unmanageable very quickly. For this problem I found solution 2.
Solution 2 - two columns
<View
style={{
flexDirection: "row",
}}
>
{/* the column for the line */}
<View style={styles.stepLineContainer}>
<View style={styles.stepLine}></View>
</View>
{/* the column for the steps */}
<View
style={{
flex: 1,
gap: 8,
}}
>
{steps.map((step, i) => (
<View style={styles.stepContainer}>
{/* the indicator */}
<View style={styles.stepIndicator}>
<Text style={styles.stepIndicatorText}>{i + 1}</Text>
</View>
<View style={styles.step}>
<Text>{step.name}</Text>
</View>
</View>
))}
</View>
</View>
This solution involves two columns. One for the progress line and one for the steps. The idea here is to have the line in the left column which, with flexbox, will have the same height as the steps column. To have the indicators in the correct place we can place them on the actual step and give them a position: "absolute". Now we can add spacing to the steps by using marginBottom or even better the gap property.
Here is a live preview of both solutions.
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>
My all screen has a scrollView, and there's a in the middle of it. I want when someone scroll up, the text be fixed at the top and does not disappear. How can I do that? I didn't find it anywhere, thanks.
<View style={styles.container}>
<Text style={{ position : 'absolute', textAlign: 'center'}}>
Special Text
</Text>
<ScrollView>
</ScrollView>
</View>
you can do something like this
Use css property position: sticky. that will fixed your text at the top it's called sticky position. So, Please read it https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky
Be patient.
Cheer you!
i was trying to implement something similar and i got it done but unfortunately it is kinda complex (relatively) at least compared to what you would do on the web. it requires using the onLayout prop.
state = {zIndex: 0};
<View>
<View style={[your_style, {position: "relative", zIndex: this.state.zIndex}]} onLayout={({nativeEvent}) => {this.outTextHeight = nativeEvent.layout.height}}>
<Text>Special Text</Text>
</View>
<View style={{[your_style, {zIndex: 1}]}>
<ScrollView onScroll={({nativeEvent}) => {if(nativeEvent.contentOffset.y >= (this.insideTextHeight + this.insideTextOffsety){this.setState({zIndex: 2})})}}>
// your content
<View onLayout={({nativeEvent}) => {this.insideTextHeight = nativeEvent.layout.height; this.insideTextOffsety = nativeEvent.layout.y}}>// this maybe the same height so may be unnecessary
<Text>Special Text</Text>
</View>
</ScrollView>
</View>
</View>
Here is a thing, I'am struggling about using RN .
I would like to use flatlist to generate my content.
the flatlist contents can be pressed so It makes to go another page open.
I need animation freedom so the content can be pop up anywhere such as from the bottom, left, right.
I would like to use one layout which I was already built.
such a concept are, using renderingItem into view, than generating data in my component. here is concept I tried to do
<View style={styles.flatList}>
<FlatList
data={newsFeedData}
horizontal={false}
showsVerticalScrollIndicator={false}
renderItem={({item, index})=>{ return
<View>
<TouchableOpacity
activeOpacity={1}
onPress={this.newsFeedCards.bind(this)}>
<View style={styles.mgView}>
<ListItem item={item} image={item} index={index}/>
</View>
</TouchableOpacity>
</View>
}}/>
</Animated.View>
<View data={newsFeedData}
style={styles.pageDetail}
renderItem={(item, idex)=>{
return <PageDetail
item={item} image={item} image={item}></PageDetail>
}}>
</View>
Please help me anyone know the trick of this concept. I really appreciate your help!
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