I have a parent <View> type and a child <Text> type. If the text value is large, the text moves out of the container view. Any idea how to contain it ?
P.S. I dont want the text be trimmed and followed by "...", because i need to add animation to it and scroll it back into the view.
To solve this issue, I suggest using flex. Here is a simple example:
<View style={{
flex:1,
flexWrap:'wrap',
flexDirection:'row',
justifyContent:'center',
alignItems:'center',
marginTop:50}}>
<Text>Something</Text>
<Text>Something</Text>
<Text>Something</Text>
<Text>Something</Text>
<Text>Something</Text>
<Text>Something</Text>
<Text>Something</Text>
<Text>Something</Text>
</View>
The key here is the flex:1 and the flexWrap:'wrap', which tells the view to use up all the available space and wrap its children around itself. If you are still unable to make it work, try to give it an 'alignItems' style like I did in the example above.
With this code you can make something like this:
Screenshot of the code above
Related
I have a screen with header and content, and in the content section I have a search and I want when I open the keyboard to raise all the view. I tried keyboardAvoidingView but it's not working for me. What I am doing wrong here ?
return (
<View style={styles.content}>
<View style={styles.header}>
...
</View>
<KeyboardAvoidingView
keyboardVerticalOffset={hp(30)}
style={{flex: 1}}
behavior="padding">
...
</KeyboardAvoidingView>
</View>
);
and for the styling:
header: {
height: hp(30),
width: wp(100),
},
container: {
flexGrow: 1,
backgroundColor: Colors.white,
// borderTopLeftRadius: wp(7),
// borderTopRightRadius: wp(7),
},
and here is how it looks
On Android, when you style the root View to flex:1, the application height will automatically reduce by the keyboard height when keyboard is shown.
And for using of KeyboardAvoidingView, this component should be put to an as high as possible level. Formally, you shouldn't place any sized component outside it to prevent some display problems. And to adapt this component, please make sure to check the compatibility both iOS and Android. It has different behavior on the two systems.
You could try setting the behavior to be platform specific like so:
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined}>
// ...
</KeyboardAvoidingView>
It behaves slightly different on iOS and Android and this fixed my issues.
I've also seen react-native-keyboard-aware-scroll-view recommended on many posts regarding the same topic. It might be a more reliable thing to use according to other users but I haven't tried it.
I have a feed of items that looks something like this:
What I am trying to Achieve:
When the user presses an item in the feed (represented by the black box), they will be brought to a separate page for that item. When the user clicks on the star icon, they can "favorite" the item.
How I am trying to do it:
I am currently trying to implement this by nesting two TouchableOpacity's (represented by the black boxes), where the inner/child TouchableOpacity has a zIndex: 2 style applied to it.
The zIndex style does not seem to give a priority to the child container for touch events, so I was wondering if anyone knows how I can implement this pattern. I think I might need to use the PanResponder, but it seems like a very verbose way to add this functionality.
Any comments or examples would be greatly appreciated ! Thanks.
Can you not simply nest a TouchableOpacity in your parent TouchableOpacity ? I've done a mock project and this below seems to work
<View>
<TouchableOpacity
style = {{backgroundColor: 'red', height: 100}}
onPress = {() => {console.log("PARENT METHOD")}}>
//content
<TouchableOpacity
style = {{width: 30, height: 30, backgroundColor: 'yellow',
position: 'absolute', right: 5, bottom: 5}}
onPress = {() => {console.log("CHILD METHOD")}}>
//content
</TouchableOpacity>
</TouchableOpacity>
</View>
I've used logs and when pressing the small nested box, only child method is logged, and similarly for if i press the parent view.
Log output: showing independant touches
Let me know if this helps
Why not something like below:
<View style={{flex-direction: "row"}}>
<View>
<TouchableOpacity onPress={this.goToDetails.bind(this)}>
</TouchableOpacity>
</View>
<View>
<TouchableOpacity onPress={this.goToDetails.bind(this)}>
</TouchableOpacity>
<TouchableOpacity onPress={this.favoriteItem.bind(this)}>
</TouchableOpacity>
</View>
</View>
Where you have two views in a row, first view has one TouchableOpacity, and the second view has two TouchableOpacitys in a a column (where first one is similar to previous TouchableOpacity, and the second is to favorite the item).
Should be structured like this:
I have TextInput at the bottom of the screen. When TextInput is focused then keyboard appears and due to this all the flex view gets shrink to the available screen. I want to achieve that page layout should not change and input should be visible to user.
<View style={MainView}>
<View style={subMain1}>
<View style={{flex:1,backgroundColor:'#add264'}}></View>
<View style={{flex:1,backgroundColor:'#b7d778'}}></View>
<View style={{flex:1,backgroundColor:'#c2dd8b'}}></View>
</View>
<View style={subMain2}>
<View style={{flex:1,backgroundColor:'#cce39f'}}></View>
<View style={{flex:1,backgroundColor:'#d6e9b3'}}></View>
<View style={{flex:1,backgroundColor:'#69ee9a'}}>
<TextInput placeholder="input field"/>
</View>
</View>
</View>
const Styles = {
MainView:{
flex:1,
backgroundColor:'green'
},
subMain1:{
flex:1,
backgroundColor:'blue'
},
subMain2:{
flex:1,
backgroundColor:'orange'
}
}
I just found an answer to this.
I just have to use fixed height for my main container and inside that I can use flex layout. And If keyboard is hiding the content then we can use Scrollview that will allow scrollable interface when user clicks on input.
This helped me hope it can help others. :)
I'm not quite sure I understand what the issue you're running into, but I recently struggled with keyboard avoiding views in my app - for some reason, the native component just wasn't working.
Check this package out - it did the trick for me, and offers some cool customization capabilities:
https://github.com/APSL/react-native-keyboard-aware-scroll-view
Use 'react-native-keyboard-aware-scroll-view' and keep this as parent view and put all view inside that view. This node module creates scrollview and it listens to keyboard show event and automatically scrolls your screen so user can see the input box without getting it hidden behind the soft keyboard.
I'm having some problems with zIndex and position whilst styling a drop down list (react-native-menu). I want to make the drop down list appear on top of all other components on this scene when it's clicked. I'm trying to use zIndex and position but maybe not doing it correctly?
In my code (below), I'm rendering a hierarchy where Card > CardSection > various subcomponents of each. The drop down list consists of the components MenuContext (config) and TopNavigation (main drop down list).
return (
<Card>
<CardSection style={{zIndex: 2}}>
<View style={thumbnailContainerStyle}>
<Image style={thumbnailStyle}
source={{ uri: "" }}
/>
</View>
<View style={headerContentStyle}>
<Text style={headerTextStyle}>Tam</Text>
<Text>tam#tam</Text>
</View>
<MenuContext style={{ flex:1, zIndex:6, position:'absolute', flexDirection: 'column', alignItems: 'flex-end' }} >
<TopNavigation/> //this is
</MenuContext>
</CardSection>
<CardSection style={{zIndex: 1}}>
<Text style={{zIndex: 2}}>{props.post.body}</Text>
</CardSection>
</Card>
)
So the drop down is a child of the first CardSection. I've got it to appear over it's own parent CardSection but I can't get it to appear on top of the second CardSection that renders after. So I can't get it to show on top of it's parent's sibling.
I'm reluctant to use some plugin or workaround.
Any ideas? Thanks!!
So what was making it so hard to render the popup menu above things on the z-axis was the sibling of it's parent. So what helped me get the results I needed was looking more macro and moving <ContextMenu/> higher in the component hierarchy, out of this component altogether and into it's parent.
I should have inferred this since the docs for the original package I used had ContextMenu in the entry point to the app and comments such as:
// You need to place a MenuContext somewhere in your application,usually at the root.
// Menus will open within the context, and only one menu can open at a time per context.
My mistake was getting lost in the micro world of zIndex and position and assuming that what looked like a styling problem should be solved with a styling solution. I forgot about the bigger picture.
I've got some preformatted text which I want to display unwrapped and allow the user to scroll both vertically and horizontally.
A contrived example of what I've got:
<ScrollView>
<Text style={{fontFamily: 'monospace'}}>
Some preformatted text which I don't want to wrap
</Text>
</ScrollView>
The problem is that the text wraps and you can only scroll vertically.
One change that gets halfway there is by changing the ScrollView to:
<ScrollView style={{flex: 1, flexDirection: 'row'}}>
Wrapping becomes disabled, however scrolling doesn't work after I've done that.
Any help would be hugely appreciated.
It'd be
<Text numberOfLines={1}>Some text</Text>
You can also use ellipsizeMode attribute to control how overlapping text will behave.
For more informations - check out https://facebook.github.io/react-native/docs/text.html