5

enter image description here

Here is an example of what am trying to achieve and below is a breakdown of the component structure

enter image description here and this is how currently the code is:

             <View style={styles.buttonHolder}>
                <Text style={styles.greenButtonIcon}>
                    FB
                </Text>
                <Text style={styles.greenButtonText}>
                    {this.props.buttonName}
                </Text>
            </View>

My problem here since the text is center aligned to the full box i cannot have a flex value for the text and the icon since that will make them have their own space and wont float.

Can you please help. Do let me know if you need more information.

Community
  • 1
  • 1
KD.
  • 2,015
  • 3
  • 28
  • 59
  • What about setting the position of the icon to absolute, that should get contained within the view `styles.buttonHolder` – Noitidart May 27 '17 at 05:01

2 Answers2

3

Try putting them in an absolute view within the buttonHolder. Set buttonHolder to justifyContent and alignItems center. Then make the green button alignSelf to flex-start:

<View style={styles.buttonHolder}>
    <View style={styles.absolute}>
        <Text style={styles.greenButtonIcon}>
            FB
        </Text>
    </View>
    <View style={styles.absolute}>
        <Text style={styles.greenButtonText}>
            {this.props.buttonName}
        </Text>
    </View>
</View>

const styles = StyleSheet.create({
    absolute: {
        position: 'absolute',
        height: '100%',
        width: '100%',
        alignContent: 'center',
        justifyContent: 'center'
    },
    styles.greenButtonIcon: {
        alignSelf: 'flex-start'
    }
})
Noitidart
  • 35,443
  • 37
  • 154
  • 323
0

React native supports use of zIndex as similar to CSS assign the item you want to be floating a higher zIndex and the other item a lower zIndex.

Paul Nyondo
  • 2,126
  • 2
  • 23
  • 30