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.

Sac

What about setting the position of the icon to absolute, that should get contained within the view styles.buttonHolder – Schipperke

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

Schipperke

wow so quick, thanks, perfect. Only thing i added and for anyone else reference justifyContent: 'center', and alignItems: 'center', to buttonHolder – Sac

My pleasure brother @Sac :) – Schipperke

Answer 2

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.

Smuggle