Last active
July 10, 2017 13:41
-
-
Save ghernandez345/1e97ee96c20b0cd9c902b60bc39f7a8e to your computer and use it in GitHub Desktop.
React native parent dimensions dependent on child components
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Use this pattern when you want your parent components dimension | |
* to be dependent by it's children components dimensions. | |
*/ | |
const styles = StyleSheet.create({ | |
container: { | |
flexDirection: 'row', | |
alignItems: 'center', | |
alignSelf: 'flex-start' | |
}, | |
icon: { | |
// Any styles here | |
padding: 5 | |
}, | |
text: { | |
// Any styles here | |
padding: 5 | |
} | |
}); | |
const DynamicWidthAndHeightButton = () => ( | |
<TouchableOpacity style={styles.container}> | |
<Icon style={styles.icon}/> | |
<Text style={styles.text}>dynamic width text here</Text> | |
</TouchableOpacity> | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment