I have a pretty regular vertical FlatList, nothing special, however I found some weird styling bug: the background color of the list itself is always white, which makes my list items (which also has a white background) indistinguishable. Is there any way to fix it?
My code:
<FlatList
contentContainerStyle={{
backgroundColor:'purple',
}}
ListHeaderComponent={
<HeaderView />
}
data={places}
renderItem={({item}) => (
<PlaceListItem place={item} navigation={navigation} />
)}
/>
And PlaceListItem:
const styles = StyleSheet.create({
container: {
flex: 1,
borderWidth: 1,
borderRadius: 15,
borderColor: 'white',
overflow: 'hidden',
marginBottom: 10,
},
infoContainer: {
flex: 1,
backgroundColor: 'white',
paddingStart: 10,
},
image: {/*just size*/},
title: {/*just font style*/},
item: {/*just font style*/},
})
<SelectionHighlight
onPress={() => doStuff()}>
<View style={styles.container}>
<Image
style={styles.image}
source={{
uri: photo,
}}
/>
<View style={styles.infoContainer}>
<Text style={styles.title}>{title}</Text>
<Text style={styles.item}>{address}</Text>
</View>
</View>
</SelectionHighlight>
And results are:
Android
iOS
I found the issue, it turns out to be mine own mistake. I set backgroundColor:'white' to the TouchableHighlight, and for some reason it works fine on Android, but gives this result on iOS. Setting backgroundColor: 'transparent' to TouchableHighlight solved the issue.
Related
I am only 3 months in React-Native, and I was going through a lot of styling and shaping, and I encountered a problem with this diagonal cut, every time I try to use dimensions, it always ends up with no image and no text, I think I am missing something obvious, but I gave up on searching and trying it has been almost 2 weeks experimenting with dimensions.my code and what i tired below and the images can be seen if you copy and paste the links generated by stackoverflow.
[](https://i.stack.imgur.com/flJyJ.jpg)
[](https://i.stack.imgur.com/gUoyZ.jpg)
[](https://i.stack.imgur.com/JYprq.png)
`import { StyleSheet, Text, View, StatusBar, ImageBackground, TouchableOpacity, Dimensions } from 'react-native'
import React from 'react'
const OnBoarding = ({navigation}) => {
return (
<View style={{flex: 1, backgroundColor:"transparent"}}>
<StatusBar barStyle="light-content" backgroundColor='black' />
{/* background one image */}
<TouchableOpacity style={{flex: 1, backgroundColor:'transparent'}} onPress={()=> navigation.navigate("Selection")}>
<ImageBackground source={require('../assets/images/w20.jpg')} resizeMode='stretch' style={styles.image}>
<Text style={styles.titleText}>THE WORLD</Text>
<Text style={styles.surText}>Start playing now!</Text>
</ImageBackground>
</TouchableOpacity>
{/* background two image */}
<TouchableOpacity style={{flex: 1, backgroundColor:'transparent'}} onPress={()=>navigation.navigate("About")}>
<ImageBackground source={require('../assets/images/wp21.jpg')} resizeMode='stretch' style={styles.image}>
<Text style={styles.titleText}>HOW TO LIVE</Text>
<Text style={styles.surText}>Learn how to play!</Text>
</ImageBackground>
</TouchableOpacity>
</View>
)
}
export default OnBoarding
const styles = StyleSheet.create({
image:{
flex:1,
width:'100%',
backgroundColor:'transparent',
borderRightWidth: Dimensions.get('window').width,
borderTopWidth:225,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
},
titleText:{
flex: 1,
fontSize:42,
fontFamily:"Philosopher-Bold",
textAlign:'center',
textAlignVertical:'bottom',
color: 'white',
textShadowColor: 'black',
textShadowOffset: { width: -1, height: 0 },
textShadowRadius: 30,
},
surText:{
flex: 1,
fontSize:22.5,
textAlign:'center',
fontFamily:"Philosopher-Regular",
textAlignVertical:'top',
color: 'white',
textShadowColor: 'black',
textShadowOffset: { width: -1, height: 0 },
textShadowRadius: 30,
},
})
I am building a registration form in React Native. I have this view.
When keyboard is showing it is pushing my form and image over my title view like this.
What should i do so that it my view doesnot lose its shape. I already tried scrollview and keyboard avoiding view but they are not helping.
Here is my code.
<View style={styles.container}>
<View style={styles.headingContainer}>
<Text style={styles.headingText}>Sign Up</Text>
</View>
<View style={styles.form}>
<View style={{ marginTop: 5, width: '100%', padding: 10 }}>
<Input
name="name"
placeholder="Name"
label="Name"
/>
<View style={styles.buttons}>
<Button onPress={handleSubmit}>
{isLogin ? 'Log In' : 'Sign Up'}
</Button>
</View>
</View>
</View>
<View style={styles.logoCon}>
<Image style={styles.logo} source={Logo} />
</View>
</View>
);
}
export default AuthForm;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'flex-start',
},
headingContainer: {
justifyContent: 'center',
alignItems: 'center',
width: '100%',
height: '40%',
backgroundColor: Colors.primary800,
marginBottom: '-22%',
},
form: {
backgroundColor: Colors.primary100,
justifyContent: 'center',
alignItems: 'center',
height: 'auto',
width: '100%',
borderTopLeftRadius: 80,
},
logoCon: {
alignSelf: 'center',
height: 100,
width: 100,
marginTop: 'auto',
marginBottom: -15,
},
});
Update: I have solve the above issue, but now I am facing another issue i.e. I have to hide keyboard everytime i try to input text in any of the lower inputs. Also it is pushing my top view up inside the screen. NO scrollview is working. I have tried KeyboardAvoidingView, ScrollView, Animation, KeyboardAwareScrollView so far but got no luck.
PS: I know UIs are different. Its because i have completed the UI and this is the last thing i need to work on.
I have managed to overcome this issue using this npm package: react-native-keyboard-aware-scroll-view
npm install --save react-native-keyboard-aware-scroll-view
Then in your component, the basic usage is like below
return (
<Fragment>
<SafeAreaView style={{flex: 1}}>
<KeyboardAwareScrollView keyboardShouldPersistTaps='always'>
<View style={{flex: 1}}>
//The content
</View>
</KeyboardAwareScrollView>
</SafeAreaView>
</Fragment>
);
If you have a modal, I'd suggest you to use it like that
<Modal
animationType="slide"
transparent={true}
visible={this.state.search_modal_visible}
>
<KeyboardAwareScrollView contentContainerStyle={{flexGrow: 1}}>
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
//The content
</View>
</KeyboardAwareScrollView>
</Modal>
In your AndroidManifest.xml, please be sure the line below exists as an attribute for activity tag
<activity
android:windowSoftInputMode="adjustResize"
You can hide keyboard whenever you want like that in your code
Keyboard.dismiss();
The problem here is that you have in your AndroidManifest.xml:
windowSoftInputMode="adjustResize";
Change it to:
windowSoftInputMode="adjustPan"
Note: after this change you'll need run ./gradlew clean in android folder and react-native run-android in your project directory
Try to use KeyboardAvoidingView of react native
I hade the same issue, I used this to just hide the views I don't want to see whenever the keyboard is opened: https://github.com/TIKramer/react-native-hide-onkeyboard
If you found another solution please let me know.
I tried basically every answer from this question and nothing seems to work: React native text going off my screen, refusing to wrap. What to do?
I am facing the same issue where my text goes off-screen and seems to be operating at a width of about 130% or so.
Here is the screen I render the list:
<View style={styles.container}>
<FlatList
data={messagePreviewData}
renderItem={({ item }) =>
<ChatPreview
readMessage={item.readMessage}
imgUri={item.imgUri}
username={item.username}
time={item.time}
message={item.message}
/>
}
keyExtractor={(item, index) => item.username + index}
/>
</View>
const styles = StyleSheet.create({
container: {
backgroundColor: colors.neutralOne,
flex: 1,
}
});
And here is the ChatPreview component, where the message text goes off-screen:
const ChatPreview = (props: ChatPreviewProps) => {
const { readMessage, imgUri, username, time, message } = props;
return (
<View style={styles.container}>
<View style={styles.leftContainer}>
<View style={styles.badgeAvatarContainer}>
<Avatar
rounded
source={{ uri: imgUri }}
size={scaledSize(50)}
/>
</View>
<View style={styles.usernameMessageContainer}>
<Text style={styles.username}>{username}</Text>
<Text style={styles.messagePreview} numberOfLines={2} ellipsizeMode='tail'>
{message} // this is what's going off screen
</Text>
</View>
</View>
<Text style={styles.time}>{time}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'space-between',
padding: 10,
},
leftContainer: {
flexDirection: 'row'
},
badgeAvatarContainer: {
flexDirection: 'row',
alignItems: 'center',
marginRight: 10
},
usernameMessageContainer: {
// I have tried putting many things here and nothing seems to work
},
username: {
color: colors.neutralEight,
fontFamily: fonts.bodyTwoBold.fontFamily,
fontSize: fonts.bodyTwoBold.fontSize,
lineHeight: fonts.bodyTwoBold.lineHeight,
},
messagePreview: {
color: colors.neutralFour,
fontFamily: fonts.captionOne.fontFamily,
fontSize: fonts.captionOne.fontSize,
lineHeight: fonts.captionOne.lineHeight,
},
time: {
color: colors.neutralFour,
fontFamily: fonts.captionTwo.fontFamily,
fontSize: fonts.captionTwo.fontSize,
lineHeight: fonts.captionTwo.lineHeight
}
});
It might be worth setting flex:1 from parent down to the child where the content is going off screen. I've had issues where I've forgotten to do it and it's been messed up.
Essentially you could add flex:1 to every style in ChatPreview to try it out, It won't look super nice probably but you should see if the issue is fixed I believe and tweak it from there.
coincidently i was doing a similar thing yesterday. So as you are using flex-direction row , thus , the text (which tries to get all the width given to it, by default 100%) goes out of screen as now 100% is what you said 130%. Now to restrict it, we just need to restrict its width. So set width on the text, maybe only 60% or 70% and it will work fine.
I have a really weird rendering bug in my app.
The Entry screen is supposed to show title, an image and the authors name (a header view). But the view element only gets displayed after scrolling.
<View style={this.state.baseStyles.body}>
<View style={headerStyles.header}>
<View style={headerStyles.headerSide}>
<FastImage
style={headerStyles.headerImage}
source={{uri: imgUrl}}
/>
</View>
<View style={headerStyles.headerBody}>
<Text style={headerStyles.headerTextTitle}>{entry["title"]}</Text>
<Text style={headerStyles.headerTextSubtitle}>{datetime} von {entry["author"]}</Text>
</View>
</View>
<View style={this.state.baseStyles.body}>
<WebView
style={styles.WebViewStyle}
javaScriptEnabled={true}
domStorageEnabled={false}
source={{ html: page}}
ref={(ref) => { this.webview = ref; }}
onNavigationStateChange={(event) => {
this.onWebviewPressLink(event);
}}
/>
</View>
</View>
I have tried to find the cause of the bug by looking and comparing it to older code of the app, but I haven't really changed anything. I have updated RN to 0.57.8 from 0.57.2, I haven't yet tried if I downgrade to 0.57.2 with the same code and see if the problem still occurs.
Is there a way to fix this behaviour?
When opening Entry:
https://imgur.com/AOVTwxJ
After scrolling:
https://imgur.com/6eFHg21
Thanks in advance for any help
//added styles
Header
view:{
flex: 1,
flexDirection:'column',
backgroundColor:theme.background.secondary
},
headerHighlight: {
flex:1,
},
header: {
padding:10,
paddingBottom:3,
flexDirection:'row',
backgroundColor: theme.header.background,
paddingVertical: 4,
paddingHorizontal: 4,
},
headerSide:{
paddingHorizontal:8,
},
headerImage:{
width: 70,
height: 70,
marginVertical: 4,
borderRadius: 3,
},
headerBody:{
flex:1,
flexDirection:'column'
},
headerTextTitle: {
fontSize: 19,
fontWeight: '200',
color: theme.header.text.primary,
marginTop: 8,
marginRight: 5
},
headerTextSubtitle: {
fontSize: 12,
color: theme.header.text.secondary
},
this.state.baseStyles.body:
body: {
flex: 1,
flexDirection:'column',
backgroundColor:theme.background.secondary
},
styles.WebViewStyle:
{
justifyContent: 'center',
alignItems: 'center',
flex:1,
}
I fix it by wrapping a ScrollView around it.
<ScrollView contentContainerStyle={{flex:1}}>
<View style={this.state.baseStyles.body}>
<WebView
style={styles.WebViewStyle}
javaScriptEnabled={true}
domStorageEnabled={false}
source={{ html: page}}
ref={(ref) => { this.webview = ref; }}
onNavigationStateChange={(event) => {
//console.log(event);
//console.log("Event URL"+event.url);
this.onWebviewPressLink(event);
}}
/>
</View>
</ScrollView>
I don't no why this solves it but glade it works now. Would be cool if someone could explain it.
//Little bit prittier
<ScrollView style={this.state.baseStyles.body} contentContainerStyle={{flex:1}}>
<WebView
style={styles.WebViewStyle}
javaScriptEnabled={true}
domStorageEnabled={false}
source={{ html: page}}
ref={(ref) => { this.webview = ref; }}
onNavigationStateChange={(event) => {
//console.log(event);
//console.log("Event URL"+event.url);
this.onWebviewPressLink(event);
}}
/>
</ScrollView>
I build react native app and I use with scrollView for header with list of text horizontal.
The issue is that the height of the scroll view takes half size of the screen. Even after declared it as a style, it still stays as it is.
screen with the scrollView
<View style={Style.container} >
{this.props.ExtendedNavigationStore.HeaderTitle ? <BackHeader header={this.props.ExtendedNavigationStore.HeaderTitle} onPressBack={this.goBack} /> : <Header openDrawer={this.openDrawer} />}
<ScrollView contentContainerStyle={{flexGrow:1}} style={Style.scrollableView} horizontal showsHorizontalScrollIndicator={false}>
{this.renderScrollableHeader()}
</ScrollView>
<Routes /> /* stack with dashboard screen */
</View>
</Drawer>
)
}
styles
import {StyleSheet} from 'react-native'
import {calcSize} from '../../utils'
const Styles = StyleSheet.create({
container : {
flex:1,
backgroundColor:"#e9e7e8"
},
scrollableView:{
height: calcSize(40),
backgroundColor: '#000',
},
textCategory:{
fontSize: calcSize(25),
color:'#fff'
},
scrollableButton:{
flex:1,
margin:calcSize(30)
}
})
export default Styles
As you can see the black size is the scroll View,
I want it to be small.
In routes stack into dashboard screen, the style:
const Style = StyleSheet.create({
container: {
backgroundColor: '#9BC53D',
flex: 1,
justifyContent: 'space-around',
alignItems: 'center'
},
text: {
fontSize: 35,
color: 'white',
margin: 10,
backgroundColor: 'transparent'
},
button: {
width: 100,
height: 75,
margin: 20,
borderWidth: 2,
borderColor: "#ecebeb",
justifyContent: "center",
alignItems: "center",
borderRadius: 40
}
})
There is an existing limitation with ScrollView where height cannot be provided directly.
Wrap the ScrollView in another View and give height to that View.
Like,
render() {
return (
<View style={styles.container}>
<View style={{height: 80}} >
<ScrollView
horizontal
style={{ backgroundColor: 'blue'}}
>
<Text style={{padding: 24}} >title1</Text>
<Text style={{padding: 24}} >title2</Text>
<Text style={{padding: 24}} >title3</Text>
<Text style={{padding: 24}} >title4</Text>
<Text style={{padding: 24}} >title5</Text>
</ScrollView>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
});
snack sample: https://snack.expo.io/HkVDBhJoz
EXTRAS: Unlike height providing width to a ScrollView will work correctly
Use flexGrow:0 inside ScrollView style
<ScrollView style={{ flexGrow:0 }}>
That worked for me:
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<View style={{ flexGrow: 1 }}>
...
</View>
</ScrollView>
Considering the issue that you are using fixed height for the header, and flex for the Routes maybe, the orientation for different devices would not scale well and would look weird.
Therefore you may consider switching it to the flex
Here is the example by adding flexGrow to the styles of the ScrollView since it accepts view props
<View style={{ flex: 1 }}>
<ScrollView style={{ flexGrow: 0.05, backgroundColor: 'red', paddingTop: 50 }} horizontal>
<View style={{ width: 100 }}><Text>Label</Text></View>
<View style={{ width: 100 }}><Text>Label</Text></View>
<View style={{ width: 100 }}><Text>Label</Text></View>
<View style={{ width: 100 }}><Text>Label</Text></View>
<View style={{ width: 100 }}><Text>Label</Text></View>
</ScrollView>
<View style={{ flex: 0.95, backgroundColor: 'green' }} />
</View>
and here's the link to the snack expo
Use maxHeight inside scrollview style
<ScrollView style={{ maxHeight: 40 }}>•••</ScrollView>
Setting minHeight: int, maxHeight: int to ScrollView should work where int is height in pixels.
example below
<ScrollView style={{ minHeight: 280, maxHeight: 260}}>