CODEWITHSUNDEEP
reactjsreact-nativestylesheet
user3162979
user3162979

Reputation: 935

react native stylesheet.create function is returning mapped numbers instead of style rules

I have a simple stylesheet declared at the bottom of my react component. 

const styles = StyleSheet.create({
start:{
 flex:1
},
text:{
 color: "red",
 fontSize: 24,
 flex: 1
},
separator:{
 height: 2,
 backgroundColor: "white"
}
});

When i try to refernce any of these styles, I get back a number instead of the style rules.

export default class ShowGallery extends Component{
  render(){
     return(
       <View>
         <Text style={styles.text}>Test </Text>
       </View>
    )
 }
}

here styles.text is returning 193? By the way i'm using react native version 37.0

Upvotes: 1

Views: 1530

Answers (2)

mradziwon
mradziwon

Reputation: 1236

It's normal behavior if you use StyleSheet.create(). If you need to access style object you can use StyleSheet.flatten(styles.text). Link to documentation.

Upvotes: 1

Amit Shah
Amit Shah

Reputation: 4164

This is actually a performance enhancement of StyleSheet It can be very expensive to transfer the styles from the JS side to the native side, by using StyleSheet.create the styles are sent across the bridge ahead of time, and 'cached' by the native side.

The individual numbers are then used as a reference between the JS side and the native side, to know which styles to use.

Upvotes: 1

Related Questions