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
Related
I have a React page that needs a Scrollview, there's no way around it. The content goes off the bottom of the screen, and it is encapsulated in the ScrollView. I have a red border on the ScrollView element so I can see that it goes past the bottom of the screen where the rest of my content it. However, it just does not want to scroll. I even put an 'onScroll' prop inside with console.log('hit') at one point to see if the ScrollView was even registering my attempts, it was not. This is happening in a couple of similar components, their structure is very similar. The smallest of them looks like this...
<ScrollView style={{borderColor: 'red', borderWidth: 3}}>
<View style={QualityStyles.container}>
<View style={{width: '100%'}}>
<Text style={QualityStyles.leadersTitle}>Top Three Leaders</Text>
</View>
<View style={QualityStyles.topThree}>
{renderTopThree(topThree)}
</View>
<View style={{width: '100%'}}>
<Text style={QualityStyles.leadersTitle}>Employees</Text>
</View>
<View style={QualityStyles.remainders}>
{renderOthers(others)}
</View>
</View>
</ScrollView>
The code's pretty straightforward, with renderTopThree returning 3 components that will take up about 90% of the screen, and renderOthers will fit maybe one component on the screen, and the rest (while rendered and existent) can't be seen since I can't scroll. Anyone see what could be wrong?
I resolved the issue, I had a TouchableWithoutFeedback wrappping the entire Application, and it was blocking out any ability to scroll
I am working on a react native project. Where I need to implement drop-down with an input field. When I type anything in the input field it should filter the dropdown content.
I can't use react-native-dropdown on anything because it placed a mask on the whole screen and I am not able to type anything when the dropdown is open.
So I tried to implement my own drop-down.
<View style = {{position:'absolute', zIndex:5, backgroundColor:'red'}}>
<View style = {[Styles.dropdownView, {display:this.props.display}]}>
<ScrollView style={{ top:0, bottom:0}}>
{ listData.map((val, i) => <Text key = {i} > {val} </Text> )}
</ScrollView>
</View>
</View>
Every thing is working fine but I am not able to scroll it vertically. Though it's working fine with horizontal scroll.
Please help me to fix this or suggest some other way.
Including onPress inside a Text component will cause an ugly gray highlight to appear (for a split second) on the text when pressed.
Rather than having the gray highlight, I want the text to become slightly transparent while being pressed. This can easily be accomplished by wrapping the Text component in a TouchableOpacity. However, including this within another Text component is a different story. According to this and the fact that TouchableOpacity returns a View component, I have to specify a width and a height in order to accomplish this... and it's only possible on iOS.
How can I include a "pressable" Text component--that undergoes an opacity change when pressed--within another Text component?
<Text/>
Click <TouchableOpacity onPress={...}><Text>Here</Text></TouchableOpacity>
<Text/>
Try this:
<View style={{ flex: 1, flexDirection: 'row' }}>
<Text>Click</Text>
<TouchableOpacity onPress={...}><Text>Here</Text></TouchableOpacity>
</View>
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 really do not have a ton of code for this so this might not be the perfect place to ask this.. but I need help trying to figure out some sort of a solution..
I have an array of URL's stored in the state.
<TouchableHighlight style={ styles.container } onPress={this.screenTap.bind(this)}>
<Image source={{uri: this.state.picCollection[this.state.counter].Picture }} style={styles.backgroundImage} >
<View style={ styles.loginForm }>
<Button onPress={this.screenTap.bind(this)} style={{ alignSelf: 'center', marginTop: 20, marginBottom: 20 }}>Create</Button>
<Text style={ styles.text }>Some text</Text>
</View>
</Image>
</TouchableHighlight>
This screenTap function that is the onPress just incriments, changing which url we are loading from this.state.picCollection
How this code above works is everytime its pressed it is intended to switch the image show. However, when I do that instead of seamlessly transitioning it shows this white screen before loading.
I am guessing this is because everytime I do this I am reloading the state. However I am not really sure how I would approach something like this.
Any advice would be amazing!
When you change one of the props or state variables in React, the affected components re-render. From the browser's point of view, one image disappears and another one appears in it's place.
What this means for you is that each time you change the URL, an image that wasn't there before now is, and it needs to be loaded anew. I'm very certain that's what the white flash is - the browser loading the new image.
Fortunately, you can load images without showing them. This page offers some good techniques, but the most basic is to just have N image tags with each of the images you want to load. Create a CSS class that consists of display: none and apply it to those images. Ta-da! The images are loaded and cached, but the uses doesn't see any of it.
Then, when your Image component changes its src tag to one of the Images you prepared earlier, the browser already has the image in memory, so it should load immediately. (Just make sure that it is exactly the same URL!)