Breaking News: Grepper is joining You.com. Read the official announcement!

independent height style for ios or android in stylesheet react native

Grieving Gharial answered on July 25, 2023 Popularity 1/10 Helpfulness 1/10

answer independent height style for ios or android in stylesheet react native

independent height style for ios or android in stylesheet react native

Comment

// Header.js
import { View, SafeAreaView } from 'react-native';
import styles from './styles';

class Header React.Component {
  ...
  return (
    <SafeAreaView>
        <View style={styles.headerWrap}>
    		...
  		</View>
	</SafeAreaView>
	)
}

// styles.js
import { StyleSheet, Platform } from 'react-native';

const headerHeight = Platform.OS === 'android' ? 100 : 75;
const borderRadius = 10;
const styles = StyleSheet.create({
  headerWrap: {
    paddingTop: Platform.OS === 'android' ? 15 : 0 ,
    flexDirection: 'row',
    backgroundColor: '#fff',
    justifyContent: 'space-around',
    alignItems: 'center',
    height: headerHeight,
  },
})

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: android height ios javascript react-native stylesheet

Link to this answer
Share Copy Link

Contributed on Jul 25 2023

Grieving Gharial

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

independent height style for ios or android in stylesheet react native

Contents

More Related Answers

independent height style for ios or android in stylesheet react native

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.