How to float a text over another text in React Native

Question

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

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.

Answer 1

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'
    }
})