React native styling. width: percentage - number
This can easily be solved by using Dimensions.
import { Dimensions } from 'react-native';
const MyComponent = () => {
return <Text style={{height: Dimensions.get('window').height - 100}}></Text>
};
export default MyComponent;
I'd agree with Viktor, you should be able to achieve this using Flex Box.
Here's something I put together: https://snack.expo.io/B1jDKOhyb
You set the flexDirection
of the formRow to row
, and then the first child (the holder View
for your AutoComplete component to flex: 1
. This makes it fill all available space. The next child View
is your icon holder. Which you can set to whatever value you want (in this case 50).
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.formRow}>
<View style={styles.formItem}>
// AutoComplete component goes here
</View>
<View style={styles.formIcon}>
// Icon goes here
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 100
},
formRow: {
flexDirection: 'row',
height: 50,
},
formItem: {
flex: 1,
backgroundColor: 'dodgerblue',
},
formIcon: {
width: 50,
backgroundColor: 'greenyellow',
},
});