const styles = StyleSheet.create({

    container : {
        flex : 1,
        backgroundColor : config.getColor('bg'),
    },
    title : {
        marginLeft : 80,
        marginTop : 30,
        height : 35,
        width : 100,
        borderRadius : 17,
        borderWidth : 1,
        borderColor : config.getColor('theme'),
        fontSize : 17,
        color : config.getColor('theme')
    }
});

when I console.log styles.title,I got a number.so how to convert it to a object?

const styles = StyleSheet.create({

    container : {
        flex : 1,
        backgroundColor : config.getColor('bg'),
    },
    title : {
        marginLeft : 80,
        marginTop : 30,
        height : 35,
        width : 100,
        borderRadius : 17,
        borderWidth : 1,
        borderColor : config.getColor('theme'),
        fontSize : 17,
        color : config.getColor('theme')
    }
});

when I console.log styles.title,I got a number.so how to convert it to a object?

• javascript
• reactjs
• react-native

2 Answers 2

You can use the flatten method.

Example:

StyleSheet.flatten(styles.title)

Jean's answer is very good. But I use this pattern to not repeat StyleSheet.flatten every time.

import { StyleSheet } from 'react-native'

const styles = StyleSheet.create({
    container: {
        flex: 1,
        display: 'flex',
        justifyContent: 'space-between',
        padding: 20,
    },
})

export default Object.keys(styles).reduce((newObject, key) => ({ 
  ...newObject, 
  [key]: StyleSheet.flatten(styles[key]) 
}), {})