CODEWITHSUNDEEP
javascriptreact-native
Hiero
Hiero

Reputation: 2205

Issue styling a header in React Native

I have this header written in CSS and HTML, I'm trying to make it in react native, but seems like position: 'absolute' removes my icon from the scene.

So, In my react-native app I have the following markup:

<View
   style={header}>

      <TouchableWithoutFeedback
         onPress={this.props.callback}>

      <View>
        <Image
          style={headerIcon}
          source={require('./img/back.png')} />
      </View>
   </TouchableWithoutFeedback>

   <Text style={headerTitle}>{this.props.title.toUpperCase()}</Text>
</View>

And the following stylesheet

const styles = StyleSheet.create({
    header: {
        height: 55,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: colors.white,
        flexDirection: 'row'
    },

    headerTitle: {
        color: colors.black,
        fontFamily: 'Dosis',
        fontSize: 15
    },

    headerIcon: {
        width: 22,
        height: 16
    }
})

Can someone explain me how to make the style for the react-native header to look like http://jsbin.com/bireqabujo/2/edit?html,css,output ?

Upvotes: 1

Views: 2206

Answers (1)

Faheem Ahmad
Faheem Ahmad

Reputation: 26

Try This

<View style={styles.header}>

    <TouchableWithoutFeedback
        onPress={this.props.callback}>
        <View>
            <Image
                style={styles.headerIcon}
                source={require('./img/back.png')} />
        </View>
    </TouchableWithoutFeedback>

    <View style={styles.headerTitleWrapper}><Text style={styles.headerTitle}>MY TITLE</Text></View>
</View>

And change your style to this

const styles = StyleSheet.create({

    header: {
        height: 55,
        alignItems: 'center',
        backgroundColor: "#fff",
        flexDirection: 'row'
    },

    headerTitleWrapper: {flex: 1,
        justifyContent: 'center', 
        alignItems: 'center'
    },

    headerTitle: {
        color: 'black',
        fontFamily: 'Dosis',
        fontSize: 15
    },

    headerIcon: {
        width: 22,
        height: 16
    }
})

Check This on

https://rnplay.org/apps/iSpc1Q

Upvotes: 1

Related Questions