CODEWITHSUNDEEP
react-nativeflexbox
GreetingsFriend
GreetingsFriend

Reputation: 341

react-native flexbox children inner elements

Using react-native. How to make text show inside (and not bellow) the background image?

       import React, { Component } from 'react';
        import {
          AppRegistry,
          StyleSheet,
          Text,
          View,
          Image,
          TextInput,
          TouchableOpacity,
          AsyncStorage,
        } from 'react-native';

        import { Navigator } from 'react-native-deprecated-custom-components';

        export default class Test extends Component {

          render() {
            return (
              <View style={styles.container}>
                <Image
                source={require('../img/example.jpg')}
                style={styles.backgroundImage}
                blurRadius={1} />

                <View style={styles.content}>
                  <Text style={styles.logo}> Example Text </Text>

                </View>
              </View>
            );
          }
        }
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  backgroundImage: {
    flex: 1,
    alignSelf: 'stretch',
    width: null,
    justifyContent: 'center',
  },
  content: {
    alignItems: 'center',
  },
  logo: {
    color: 'white',
    fontSize: 40,
    fontStyle: 'italic',
    fontWeight: 'bold',
    textShadowColor: '#252525',
    textShadowOffset: { width: 2, height: 2 },
    textShadowRadius: 15,
    marginBottom: 20,
  }
});

As you can see, in the example above, the Text appears outside the backgroundimage... Maybe is something with the flexbox but im not sure...

Upvotes: 0

Views: 62

Answers (1)

UXDart
UXDart

Reputation: 2620

try with:

<Image
            source={require('../img/example.jpg')}
            style={styles.backgroundImage}
            blurRadius={1}>

            <View style={styles.content}>
              <Text style={styles.logo}> Example Text </Text>

            </View>
</Image>

Upvotes: 2

Related Questions