I want to put some words in the corners in React Native

Question

I want to put some words in the 4 corners of the phone but tried everything and i haven't succeeded , i'm beginner in React Native .

state = {
fontLoaded: false
}

async componentDidMount () {
await this._loadAssets()
}

async _loadAssets () {
await Font.loadAsync({
  'aga-arabesque': require('./assets/fonts/aga-arabesque.ttf'),
  'Mistral': require('./assets/fonts/Mistral.ttf')

})
this.setState({fontLoaded: true})
}

this is all to load custom fonts .

and this is the code of all the screen

let text = null
if (this.state.fontLoaded) {
  text = <View>
    <View style={{flexDirection: 'row',flex: 1}}>
      <Text style={{fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray',}}>
        a
      </Text>
      <Text style={{fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray',paddingLeft: "60%"}}>
        h
      </Text>
    </View>
    <Text style={{fontSize: 170, fontFamily: 'Mistral', color: 'gray',flex: 1, paddingLeft: "20%"}}>
      World
    </Text>
    <View style={{flexDirection: 'row',flex: 1,paddingBottom : "0%"}}>
      <Text style={{fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray',}}>
        s
      </Text>
      <Text style={{fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray',paddingLeft: "70%"}}>
        g
      </Text>
    </View>
  </View>
}

and here is the Style of the container

container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'space-between'
},

and thank you very much for your help .

Answer 1

You can use these attributes: right: 0, top: 0, left: 0, bottom: 0 in your style.

right: 0, top: 0 will print your item on right-Top corner. left: 0, top: 0 will print your item on left-Top corner. and so on....

Example:

<Text style={{fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray', left: 0, Top: 0}}>
        a
</Text>

just to help you I created working example

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
    <View style={{flexDirection: 'row',flex: 1}}>
      <Text style={{ position: 'absolute', fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray'}}>
        a
      </Text>
      <Text style={{ position: 'absolute', right: 0, fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray',paddingLeft: "60%"}}>
        h
      </Text>
    </View>
    <Text style={{ fontSize: 70, fontFamily: 'Mistral', color: 'gray',flex: 1, paddingLeft: "20%"}}>
      World
    </Text>
    <View style={{flexDirection: 'row',flex: 1}}>
      <Text style={{ position: 'absolute', bottom: 0, left: 0, fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray'}}>
        s
      </Text>
      <Text style={{ position: 'absolute', fontSize: 60, bottom: 0, right: 0, fontFamily: 'aga-arabesque', color: 'gray'}}>
        g
      </Text>
    </View>
  </View>
    );
  }
}

position: absolute was missing earlier.