I am having a lot of trouble working with a scroll view and flex dimensions. Basically the initial screen of the app should show a top side "banner" while the bottom is the "content".
The content is going to contain many "cards" that each contain information, and users will be able to scroll down to see the next card, and the next, and etc.
However, the flex property does not seem to be working at all, and I am not even able to create the proper sizes for the "banner" section and the "content" section.
This is my code:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
ScrollView,
TextInput
{ from 'react-native';
import RestaurantCard from './common/RestaurantCard';
export default class MemberArea extends Component<Props> {
constructor(props){
super(props);
this.state = {
searchText: ''
}
}
render() {
return (
<ScrollView contentContainerStyle = {styles.contentContainer}>
<View style={styles.banner}>
<TextInput style={styles.search}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Search for Restaurants"
textAlign= 'center'
textAlignVertical='center'
returnKeyType="search"
/>
</View>
<Text style={styles.dropdown}>
{"What's nearby V"}
</Text>
<View style={styles.cards}>
<RestaurantCard />
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
contentContainer:{
flexGrow: 1,
flexDirection: 'column'
},
cards:{
flex:3,
backgroundColor:'#000000'
},
banner: {
flex:15,
backgroundColor: '#F36B45',
paddingBottom: 80
},
search:{
marginTop: 20,
paddingBottom: 5,
paddingTop: 5,
height: 30,
marginHorizontal: 40,
borderRadius: 20,
backgroundColor: 'rgb(255,255,255)'
},
dropdown:{
color: 'black',
fontWeight:'900',
fontSize:24,
margin:30
}
});
UPDATE: As seen in the comments below, I surrounded my scrollview with another view. I gave the Parent view Flex:1. The problem I run into now is as follows:
If I give the scrollview contentcontainerstyle flexGrow: 1, then the scrolling works as normal, but I cannot give the children sections of the scrollview space dimensions with flex values. However, if I give the scrollview flex:1 (rather than flexGrow), then I can give space dimensions to the children sections, but the scrolling function is disabled. Any help would be greatly appreciated!
Issue you have is you set content inside memberArea to grow according to the content but outside the memberArea, it's fixed. Add flex: 1 style to View in App.
<View style={{flex: 1}}> // App
Then you don't need to set contentContainerStyle for the ScrollView
Why do you set flex: 15? Check the doc first.
Here's the codesandbox
Read the React-Native Docs on Flexbox properly.
[https://facebook.github.io/react-native/docs/flexbox.html][1]
You cannot set Higher values to child Views of the Parent Views.
If you want to divide the Parent's Flex: 1, into 2 children - you can do Flex:0.5 and Flex:0.5 to the two children.
If you want every child to have their own space, assign Flex: 1 to each of them.
Check the Docs and other articles on it for more details.
Related
My component is extremely simple, I have a <View> component with a flex:1 property.
I have another View inside of that parent View with a property of flex: .5, from my understanding - it should take up 50% of the parent View's height. But it doesn't take up anything, it's gone as if there is no element there. height: "50%" works though.
because of the other view with flex: 1 take the entire space of parent,
flex: 1 means width: 100% or height: 100% of the parent (depends on the flex direction).
Change to flex: .5 for both Views and you will see them in the half and half of parent.
If your code is like the following, it should be working.
<View style={{flex: 1, backgroundColor: 'blue'}}>
<View style={{flex: .5, backgroundColor: 'red'}} />
</View>
Just be aware the component above will affected by its parent View as well. Please check all the flex in parent views.
Also, it is good to provide any of the code in the question to make it easier for debugging.
As per your program you have used only View component inside another View component. also you have added style {flex:1} to parent view and {flex: 0.5} style to child.
Problem : your problem is child view is not taking 50% of the parent using {flex: 0.5}.
Solution : if you want to access 50% of the parent using {flex: 0.5} then you have to add any component like Text component inside of child View etc..
ex:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow strict-local
*/
import React from 'react';
import {
Text,
View,
} from 'react-native';
const App = () => {
return (
<View style={{ flex: 1, flexDirection:'row' }}>
<View style={{ flex: 0.5, backgroundColor: 'red' }}>
<Text>{"Hello"}</Text>
</View>
</View>
);
};
export default App;
I'm trying to make a basic tab application with React Navigation and so I have three pages with plain text. They centre vertically but not horizontally on the tabs. This is using alignContent and justifyContent in conjunction with each other (which has worked for me in the past).
At first I suspected the flex was only flexing vertically and so I applied a contrasting colour. However it seems to span the tab. I have also tried textAlign, but neither cases seem to work.
This is an example of one of the screens:
export class ExampleScreen extends Component {
render() {
return(
<View style={styles.container}>
<Text>Example!</Text>
</View>
)
}
}
And here is the StyleSheet:
export const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFF',
alignContent: 'center',
justifyContent: 'center'
}
})
There are no error messages. However I would expect the text to centre horizontally but all I get is this:
Your text is not horizontally center because Text is taking full width of the screen,
you need to center content inside Text
<Text style={{ textAlign: 'center' }}>Example!</Text>
I have a list of chat messages in my app to which new items are added to the bottom. I used some code from another SO question to make the FlatList stick to the bottom when new items are added, as below
<FlatList
data={messages}
renderItem={({item}) => <ChatMessage message={item}></ChatMessage>}
keyExtractor={(item, index) => index.toString()}
initialNumToRender={messages.length}
initialScrollIndex={messages.length-1}
ref={ref => this.flatList = ref}
onContentSizeChange={(contentWidth, contentHeight)=>{
this.flatList.scrollToEnd();
}}
/>
The problem is that when the initial list renders (only 35 items, hardcoded in an array for now) it seems to render just a few items, then scroll down a bit, then render a few more, then scroll down a bit until it finally completes the rendering and sticks to the bottom. It's choppy and slow, despite adding initialNumToRender={messages.length} and rendering an incredibly simple node for each result.
Ideally I guess I need to wait for it to fully render before displaying anything to the user but (A) they'd have to wait a couple of seconds to start using the chat room and (B) I don't think that's how Flatlist works, I assume the elements have to be viewable before it is rendered.
Is there just a better way to do this? (Testing on Android by the way)
EDIT: Adding ChatMessage component for completeness
// Chat Message
import React, { Component } from 'react'
import {
StyleSheet,
ImageBackground,
Text,
View
} from 'react-native'
class ChatMessage extends Component {
constructor(props) {
super(props)
this.state = { }
}
render() {
return (
<View style={styles.chatMessage}>
<View style={styles.chatMessage_layout}>
<View style={styles.chatMessage_pic}>
<View style={styles.chatMessage_pic_image}>
<ImageBackground
source={require('./assets/images/profile-pics/example-profilr.png')}
style={styles.chatMessage_pic_image_background}
imageStyle={{ borderRadius: 40/2 }}
resizeMode="cover"
>
</ImageBackground>
</View>
</View>
<View style={styles.chatMessage_details}>
<View style={styles.chatMessage_name}>
<Text style={styles.chatMessage_name_text}>
{this.props.message.name}
<Text style={styles.chatMessage_name_time}> 24h</Text>
</Text>
</View>
<View style={styles.chatMessage_message}>
<Text style={styles.chatMessage_message_text}>{this.props.message.text}</Text>
</View>
</View>
</View>
</View>
)
}
}
export default ChatMessage;
const styles = StyleSheet.create({
chatMessage: {
paddingVertical: 10,
paddingHorizontal: 24
},
chatMessage_layout: {
flexDirection: 'row'
},
chatMessage_pic: {
width: 40,
height: 40,
marginRight: 12
},
chatMessage_pic_image: {
width: 40,
height: 40
},
chatMessage_pic_image_background: {
width: 40,
height: 40
},
chatMessage_details: {
flex: 1
},
chatMessage_name_text: {
color: '#FFF',
fontSize: 14,
fontWeight: 'bold'
},
chatMessage_name_time: {
fontSize: 11,
color: 'rgba(255,255,255,0.6)'
},
chatMessage_message: {
flexDirection: 'row',
alignItems: 'center'
},
chatMessage_message_text: {
color: '#FFF',
fontSize: 12
}
})
If you have less number of items and want to render all items at once then you should use ScrollView as mentioned in the docs
ScrollView: Renders all elements at once, but slow if there are large number of elements.
FlatList: Renders items in a lazy mode, when they are about to appear and removes them when they leave the visible display to save memory that makes it usable for performance on large lists.
For Flatlist optimization you need to use PureComponent whenever you render the child so that it only shallow compares the props.
Also in the keyExtractor use a unique id for your item and do not depend upon the index, since when the item updates the index is not reliable and may change
Background
I have an image placed on a screen meant to show when the screen loads other content.
I want to center the image so it is always center on all devices.
Problem
Currently the image shows up top center. I would like it to be aligned vertically as well. Also to be sure that it will always look the same on all devices.
Question
What is the solution to make sure the image is always centered and the right size for all devices?
Example,
My current code,
In Photoshop
Image is 300 Resolution
Height is 776 px
Width is 600 px
I want the image to be centered horizontally and vertically in all devices and look good without pixelating. Natively I know I need to set the image sizes. But from my understanding in React Native I can use on image but then use JSX to handle it being responsive.
import React from 'react';
import {
StyleSheet,
View,
Image,
} from 'react-native';
const logo = require('../images/logo.jpg');
const LoadingScreen = () => (
<View>
<Image
style={styles.logo}
source={logo}
/>
</View>
);
const styles = StyleSheet.create({
logo: {
justifyContent: 'center',
alignItems: 'center',
width: 300,
height: 400,
},
});
export default LoadingScreen;
You need to set the style of <View> for justifyContent and alignItems for centering the <Image>.
Should be like this :
const LoadingScreen = () => (
<View style={styles.container}>
<Image
style={styles.logo}
source={logo}
/>
</View>
);
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
},
logo: {
width: 300,
height: 400,
},
});
Or you can use alignSelf on the <Image> to make it center, but it will still need to add justifyContent on <View> to make it center vertically.
The View container should have styling as
flexDirection: 'column'
justifyContent: 'center'
alignItems: 'center'
height: '100%'
The height makes sure it spans throughout the page, thus making the image become both vertically and horizontally aligned.
For the image size, I think using percentage will do the trick instead of defining definite width/height.
Set in view:
justifycontent:center
And in child:
alignself:center
And perform in task.
Set in parent view:
justifycontent:center
And in child set:
alignself:center
I use the Navigator.NavigationBar component to make a navbar, but the text not vertical centering.
Like this:
How can I solve this?
I just ran into this issue too. The solution:
<Navigator.NavigationBar
routeMapper={{
Title: (route, navigator, index, navState) =>
{
return (
<View style={{
justifyContent: 'center',
flex: 1
}}>
<Text style={{color: 'white'}}>Candidates</Text>
</View>
);
},
}}
/>
So basically make sure there's a parent wrap on your navbar elements filling the navbars height (the flex: 1 rule) and vertically center its contents with justifyContent: 'center'.
I've done the styles inline for this example, but of course it'd be more efficient to get those from a StyleSheet object.