Related
For parent View I have set flex 1 and for child view, I have given Flex 1 and Flex 4 respectively. But the first child view is taking all the spaces.
Plz refer the below screenshot
export default function App() {
return (
<View style={styles.appContainer}>
<View style={styles.inputContainer}>
<TextInput style={styles.textInput} placeholder='Add your goal' />
<Button title='Add me' />
</View >
<View styles={styles.goalContainer}>
<Text>List of goals...</Text>
</View>
</View>
);
}
// Styles
const styles = StyleSheet.create({
appContainer: {
flex: 1,
paddingTop: 50,
paddingHorizontal: 16
}
,
inputContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingBottom: 24,
borderBottomWidth: 1,
borderBottomColor: '#cccccc'
},
textInput: {
borderWidth: 1,
borderColor: '#cccccc',
width: '70%',
marginRight: 8,
padding: 8
},
goalContainer: {
flex: 4
}}) //Forgot to add curly bracket and closing bracket
correct style spelling in View.
<View style={styles.goalContainer}>
<Text>List of goals...</Text>
</View>
Please try with below code
import React from 'react'
import {View,StyleSheet,Text,TextInput,Button} from 'react-native'
export default function App() {
return (
<View style={styles.appContainer}>
<View style={styles.inputContainer}>
<TextInput style={styles.textInput} placeholder='Add your goal' />
<Button title='Add me' />
</View>
<View style={styles.goalContainer}>
<Text>List of goals...</Text>
</View>
</View>
);
}
// Styles
const styles = StyleSheet.create({
appContainer: {
flex: 1,
paddingTop: 50,
paddingHorizontal: 16,
backgroundColor: null,
}
,
inputContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingBottom: 24,
borderBottomWidth: 1,
borderBottomColor: '#cccccc',
backgroundColor:null
},
textInput: {
borderWidth: 1,
borderColor: '#cccccc',
width: '70%',
marginRight: 8,
padding: 8,
backgroundColor:null
},
goalContainer: {
flex: 4,
backgroundColor: null
}
})
I'm having some troubles displaying information which I believe they have to do with the Flexbox Properties, but no matter how I play around with the Styles I don't get to fit everything in some components.
First I have this Component which is a Simple Card Component where I pass my data from API:
<PartidoItem
localImage={logoLocal}
marcadorLocal={marcadorLocal}
time={date}
partidoId={partidoId}
estatus={estatus}
minute={elapsed}
estadio={estadio}
marcadorVisita={marcadorVisita}
visitImage={logoVisita}
onSelect={estatus !== 'NS' && estatus !== 'TBD' ? () => {
selectPartidoHandler(partidoId, tituloPartido)
}
: () => { }
}
/>
This comes from this Component:
import React from 'react';
import { View, Text, Image, StyleSheet, TouchableNativeFeedback, TouchableOpacity, Platform } from 'react-native';
import Card from '../UI/Card';
import Colors from '../../constants/Colors';
const PartidoItem = props => {
let TouchableCmp = TouchableOpacity;
if (Platform.OS === 'android' && Platform.Version >= 21) {
TouchableCmp = TouchableNativeFeedback;
}
return (
<Card style={styles.product}>
<View style={styles.touchable}>
<TouchableCmp onPress={props.onSelect} useForeground>
<View style={styles.container}>
<View style={styles.column}>
<View style={styles.imageContainer}>
<Image
resizeMode="cover"
style={styles.image}
source={{ uri: props.localImage }}
/>
</View>
</View>
<View style={styles.column}>
<Text style={styles.number}>{props.marcadorLocal}</Text>
</View>
{props.estatus === 'NS' || props.estatus === 'TBD'
? <View style={styles.column}>
<Text style={styles.date}>{props.time}</Text>
<Text style={styles.title}>{props.estadio}</Text>
</View>
: props.estatus === 'FT' ?
<View style={styles.column}>
<Text style={styles.title2}>Final</Text>
<Text style={styles.title}>{props.estadio}</Text>
</View>
:
<View style={styles.column}>
<Text style={styles.title}>Tiempo:</Text>
<Text style={styles.title}>{props.minute} '</Text>
</View>
}
<View style={styles.column}>
<Text style={styles.number}>{props.marcadorVisita}</Text>
</View>
<View style={styles.column}>
<View style={styles.imageContainer}>
<Image
resizeMode="cover"
style={styles.image}
source={{ uri: props.visitImage }}
/>
</View>
</View>
</View>
</TouchableCmp>
</View>
</Card>
);
};
const styles = StyleSheet.create({
product: {
height: 100,
margin: 20,
justifyContent: 'center',
alignItems: 'center',
},
touchable: {
borderRadius: 10,
},
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
column: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
width: '20%',
},
space_between_columns: {
width: 100
},
box: {
height: 50,
width: 50
},
imageContainer: {
width: '100%',
height: '70%',
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
overflow: 'hidden',
marginHorizontal: 10,
overflow: 'hidden',
},
image: {
width: '100%',
height: '100%',
flex: 1,
},
hora: {
fontSize: 14,
color: '#888',
fontWeight: 'bold',
textAlign: 'center',
},
number: {
fontSize: 50,
marginVertical: 4,
fontWeight: 'bold',
justifyContent: 'center',
color: Colors.secondary,
},
title: {
fontSize: 14,
marginVertical: 4,
fontWeight: 'bold',
textAlign: 'center',
//flexWrap: 'wrap',
flex: 2,
flexGrow: 1,
},
title2: {
fontSize: 14,
marginVertical: 4,
fontWeight: 'bold',
textAlign: 'center',
color: 'red',
},
date: {
fontSize: 14,
marginVertical: 4,
textAlign: 'center',
flex: 1,
flexGrow: 1,
marginHorizontal: 2,
},
});
export default PartidoItem;
Which Holds this Component as well:
import React from 'react';
import { View, StyleSheet } from 'react-native';
//Importacion de los colores
import Colors from "../../constants/Colors";
const Card = props => {
return (
<View style={{...styles.card, ...props.style}}>
{props.children}
</View>
);
};
const styles = StyleSheet.create({
card: {
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 8,
elevation: 5,
borderRadius: 10,
backgroundColor: Colors.background,
}
});
export default Card;
Now the problem is that when I see it in the Android Emulator and it has large Strings I see this:
As you can see the Component is the one in the Primary Box and the Property "Estadio" is too big that doesn't show completely
The same happens when I check this on my iOS device (through Expo):
Is there a way to get this info to fit into that space so it shows the Full Name?
Kind Regards
PD: After Change Advise on first Answer this is the result with the Logos not showing correctly:
Try this for your styles :
const styles = StyleSheet.create({
product: {
height: 120,
margin: 20,
justifyContent: 'center',
alignItems: 'center',
},
touchable: {
borderRadius: 10,
},
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
column: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
},
space_between_columns: {
width: 100
},
box: {
height: 50,
width: 50
},
imageContainer: {
width: 100,
height: 100,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
overflow: 'hidden',
marginHorizontal: 10,
overflow: 'hidden',
},
image: {
width: '100%',
height: '100%',
flex: 1,
},
hora: {
fontSize: 14,
color: '#888',
fontWeight: 'bold',
textAlign: 'center',
},
number: {
fontSize: 50,
marginVertical: 4,
fontWeight: 'bold',
justifyContent: 'center',
color: Colors.secondary,
},
title: {
fontSize: 14,
margin: 5,
fontWeight: 'bold',
textAlign: 'center',
//flexWrap: 'wrap',
flex: 2,
flexGrow: 1,
},
title2: {
fontSize: 14,
marginVertical: 4,
fontWeight: 'bold',
textAlign: 'center',
color: 'red',
},
date: {
fontSize: 14,
marginVertical: 4,
textAlign: 'center',
flex: 1,
flexGrow: 1,
marginHorizontal: 2,
},
});
I am trying to style a NavBar for an app with a logo in the center and the back button on the left. I gotten pretty far in centering the logo and button horizontally. However, when I set a align-items:'center' attribute, it seems to break with Touchable Opacity. Is there a way I can center my components vertically and horizontally?
ex. |<- LOGO |
import React,{ Component } from 'react';
import { StyleSheet, View, Image, Text } from 'react-native';
import { colors } from '../../utils/theme';
import { widthScale, heightScale } from '../../utils/responsive';
import {TouchableOpacity}from 'react-native';
const logo = require('../../assets/images/logo.png');
const prev = require('../../assets/images/baseline-arrow_back-24px.png');
class NavBar extends Component{
constructor(props) {
super(props);
}
render(){
return(
<View style ={styles.nav}
<TouchableOpacity style= {styles.prev} onPress={handleClick()}>
<Image source={prev} />
</TouchableOpacity>
<Image style={styles.logo} source={logo} />
<Image source={prev} style={styles.tex} />
</View>
);
}
}
export default NavBar;
const styles = StyleSheet.create({
nav: {
flexDirection: 'row',
justifyContent: 'space-between',
backgroundColor: colors.tertiary,
width: widthScale('100%'),
height: heightScale('2%'),
paddingVertical: heightScale('4%'),
borderBottomWidth: 2,
borderWidth: 1,
flexWrap : 'wrap',
borderColor: 'green',
flex:1
},
logo: {
justifyContent: 'center',
alignItems:'center',
borderWidth: 1,
borderColor: 'blue'
},
info: {
justifyContent: 'center',
},
prev:{
borderRadius: 10,
borderWidth: 1,
borderColor: 'red',
alignItems:'center',
},
tex:{
borderRadius: 10,
borderWidth: 1,
borderColor: 'orange',
justifyContent: 'space-between',
alignItems:'center',
opacity: 0,
}
});
1. Without Touchable Buttons align-items: center, justify-content: center
2. With Touchable Buttons just justify-content: space-between
3. With Touchable Buttons justify-content: space-between and align-items: center
enter code here<SafeAreaView style={styles.maincontent}>
<View style={styles.toolbar}>
<TouchableOpacity style={{ justifyContent: 'center', }} activeOpacity={0.4} onPress={() => Actions.pop()}>
<Image source={{ uri: 'ic_arrow_back_gris_24dp' }} style={styles.back_img} />
</TouchableOpacity>
<Image source={{uri : 'logo'}} style={styles.back_txt}
/>
</View>
</SafeAreaView>
style :
maincontent: {
height: '100%',
width: '100%',
flexDirection: 'column',
backgroundColor: '#f1f1f1',
padding: 10
},
toolbar: {
backgroundColor: '#FFFFFF',
height: 50,
width: '100%',
flexDirection: 'row',
borderRadius: 3,
marginBottom: 10
},
back_img: {
height: 24,
width: 24,
justifyContent: 'center',
alignSelf: 'center',
marginLeft: 10,
padding: 4
},
back_txt: {
color: '#808080',
justifyContent: 'center',
alignSelf: 'center',
marginLeft: '13%',
fontSize: 14,
width: '65%'
},
It seems like the Touchable Opacity was stretching to fill space. By wrapping the Touchable Opacity in a View and limiting the width of that view, the styling worked as intended.
<View style={styles.nav}>
<View style={styles.toolbar}>
<TouchableOpacity style={{ justifyContent: 'nav'}} activeOpacity={0.4} onPress={this.props.prev}>
<Image source={prev} style={styles.back_img} />
</TouchableOpacity>
</View>
<Image source={logo} style={styles.back_txt}
/>
<Image source={prev} style={styles.tex} />
</View>
styles:
const styles = StyleSheet.create({
nav: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems:'center',
backgroundColor: colors.tertiary,
width: widthScale('100%'),
height: heightScale('2%'),
paddingVertical: heightScale('4%'),
borderBottomWidth: 2,
flexWrap : 'wrap',
},
tex:{
justifyContent: 'center',
alignItems:'center',
opacity: 0,
width: widthScale('10%')
},
toolbar: {
flexDirection: 'row',
alignItems: 'center',
width: widthScale('10%')
},
back_img: {
justifyContent: 'center',
alignSelf: 'center',
aspectRatio:1.5,
},
back_txt: {
justifyContent: 'center',
alignSelf: 'center',
},
});
I have a multiple Views, ImageBackground etc that are all nested.
Each time there is a View there is an additionnal margin that is added and my list is in a very restrictive area.
I set margin to 0 but it doesn't solve the problem.
Do you know how I can avoid useless margin around the list ?
I have tested to set margin to 0 and marginLeft, Right, etc but I dont understand way I still have margin
render() {
return (
<View style ={styles.container}>
<ImageBackground
source={require("./images/image1.jpg")}
style={styles.imageBackground}>
<View style ={{flex:14}}>
<View style={styles.flatListContainer}>
<View style={styles.List}>
<FlatList
data={[
{key: 'ab'},
{key: 'cd'},
{key: 'ef'},
]}
renderItem={({item}) => <Text style={styles.text}>{item.key}</Text>}
/>
</View>
<View style={styles.midList}>
<FlatList
data={[
{key: 'gh'},
{key: 'ij'},
{key: 'kl'},
]}
renderItem={({item}) => <Text style={styles.text}>{item.key}</Text>}
/>
</View>
<View style={styles.List}>
<FlatList
data={[
{key: 'mn'},
{key: 'op'},
{key: 'qr'},
]}
renderItem={({item}) => <Text style={styles.text}>{item.key}</Text>}
/>
</View>
</View>
</View>
</ImageBackground>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
margin: 0,
},
mainContainer: {
flex: 1,
alignItems: 'center',
},
flatListContainer: {
flex: 1,
alignItems: 'center',
flexDirection: 'row',
margin: 0
},
List: {
margin: 0
},
midList: {
borderLeftColor: '#00AABB',
borderLeftWidth: 1,
marginLeft: 0,
borderRightColor: '#00AABB',
borderRightWidth: 1,
marginRight: 0,
marginBottom: 33,
},
logo: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
},
imageContainer: {
flex: 1,
alignItems: 'center',
flexDirection: 'row',
//backgroundColor: '#fff',
//justifyContent: 'center',
alignItems: 'center',
},
touchOpacity: {
flex: 1,
alignItems: 'center',
resizeMode: "contain",
marginLeft: 0
},
imageBackground: {
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
},
headText: {
flex: 1,
alignItems: 'center',
textAlign: 'center',
color: 'white',
},
safety: {
flex: 0.2,
alignItems: 'center',
color: 'greenyellow',
},
text: {
flex: 2,
textAlign: 'center',
color: 'white',
},
});
```
Can you try the following, I just updated the styles.
render() {
return (
<View style={styles.container}>
<ImageBackground
source={require("./images/image1.jpg")}
style={styles.imageBackground}
>
<View style={{ width: "100%", height: "100%" }}>
<View style={styles.flatListContainer}>
<View style={styles.List}>
<FlatList
style={{ flex: 1 }}
data={[{ key: "ab" }, { key: "cd" }, { key: "ef" }]}
renderItem={({ item }) => (
<Text style={styles.text}>{item.key}</Text>
)}
/>
</View>
<View style={styles.midList}>
<FlatList
data={[{ key: "gh" }, { key: "ij" }, { key: "kl" }]}
renderItem={({ item }) => (
<Text style={styles.text}>{item.key}</Text>
)}
/>
</View>
<View style={styles.List}>
<FlatList
data={[{ key: "mn" }, { key: "op" }, { key: "qr" }]}
renderItem={({ item }) => (
<Text style={styles.text}>{item.key}</Text>
)}
/>
</View>
</View>
</View>
</ImageBackground>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
// alignItems: "center",
// margin: 0
},
mainContainer: {
flex: 1,
alignItems: "center"
},
flatListContainer: {
flex: 1,
// alignItems: "center",
flexDirection: "row"
// margin: 0
},
List: {
// margin: 0,
flex: 1
},
midList: {
flex: 1,
borderLeftColor: "#00AABB",
borderLeftWidth: 1,
// marginLeft: 0,
borderRightColor: "#00AABB",
borderRightWidth: 1,
marginRight: 0
// marginBottom: 33
},
logo: {
flex: 1,
flexDirection: "row",
alignItems: "center"
},
imageContainer: {
flex: 1,
alignItems: "center",
flexDirection: "row",
//backgroundColor: '#fff',
//justifyContent: 'center',
alignItems: "center"
},
touchOpacity: {
flex: 1,
alignItems: "center",
resizeMode: "contain",
marginLeft: 0
},
imageBackground: {
width: "100%",
height: "100%"
// alignItems: "center"
// justifyContent: "center"
},
headText: {
flex: 1,
alignItems: "center",
textAlign: "center",
color: "white"
},
safety: {
flex: 0.2,
alignItems: "center",
color: "greenyellow"
},
text: {
// flex: 2,
textAlign: "center",
color: "white",
backgroundColor: "red"
}
});
My render function is as follows :
render() {
return (
<View style={styles.container}>
<Camera
style={styles.camera}
ref={(cam) => {
this.camera = cam;
}}
onZoomChanged={this.onZoomChanged.bind(this)}
onFocusChanged={this.onFocusChanged.bind(this)}
torchMode={this.state.torch}
flashMode={this.state.flash}>
{this.imageOverlay()}
</Camera>
<View style={styles.commandBar}>
<TouchableHighlight onPress={this.fromLocal.bind(this)}>
<View style={styles.capture}>
<Icon .../>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={this.takePicture.bind(this)}>
<View style={styles.captureN}>
<Icon style={{transform: [{rotate: '90deg'}],}} .../>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={this.onTorchToggle.bind(this)}>
<View style={styles.capture}>
<Icon ... />
</View>
</TouchableHighlight>
</View>
</View>
);
}
I removed I few TouchableHighlight from the code above to make te code smaller.
And the styles are as follows:
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column'
},
camera: {
justifyContent: 'flex-end',
alignItems: 'center',
width: dw.width,
height: dw.height,
flexDirection:'column'
},
commandBar: {
flex: 0,
bottom: 85,
flexDirection: 'row',
alignItems: 'center',
justifyContent: "center"
},
capture: {
backgroundColor: '#444',
opacity: 0.7,
borderRadius: 5,
padding: 8,
paddingTop: 5,
paddingBottom: 5,
width: 55,
marginLeft: 8,
alignItems: 'center',
transform: [{rotate: '90deg'}],
},
firstCapture: {
marginLeft: 0
},
captureN: {
backgroundColor: '#444',
opacity: 0.7,
borderRadius: 5,
padding: 10,
width: 60,
marginLeft: 8,
alignItems: 'center'
},
imageContainer: {
flexDirection: 'row',
alignItems: 'flex-end'
},
innerImage: {
flex: 0,
height: dw.width,
width: dw.height,
marginBottom: 170,
resizeMode: 'contain',
transform: [{rotate: '90deg'}]
}
});
I want to take the photo with an image overlay in the landscape mode. On IOS it works fine, it looks as :
But on Android it doesn't work, I'm getting the screen as follows:
Any idea how to solve it?
Maybe you could try using different styles for Android and iOS with Platform. For example:
import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({ height: (Platform.OS === 'ios') ? 200 : 100, });
Source: React Native Platform