0

I am making a custom drawer navigation for my app. Where I am using background image (it will not take full space), on the background image I am using another image. After that I have to show some content below background image.

This is the component I made for drawer navigation. I am not sure if this is the right approach. you can get the immediate result by pasting this code in expo app.

import React from 'react';
import { View, Text, Button, ImageBackground, Image } from 'react-native';

class Sidebar extends React.Component {
  render() {
    return (
      <ImageBackground source={{uri: 'https://images.pexels.com/photos/1738762/pexels-photo-1738762.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'}} style={{ width: '100%', height: '60%' }}>
        <Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}} style={{width: 200, height: 200, marginLeft: 20}} />
          <Text style={{marginTop: 70, marginLeft: 20}}>Information</Text>
          <Text style={{marginTop: 10, marginLeft: 20}}>Settings</Text>
          <Text style={{marginTop: 10, marginLeft: 20}}>Favorite</Text>
      </ImageBackground>
    );
  }  
}

export default Sidebar

What would be the better way to get this kind of result. is this ok give as much margin to my text that it come below the background image

PrimeTimeTran
  • 1,807
  • 2
  • 17
  • 29
Basit
  • 327
  • 3
  • 8
  • 19

1 Answers1

0

Well it not good to use margin like that. The best way is to control everything with flex inside views:

render() {
   return (
      <View style={{flex:1}}>
      <View style={{flex:1.5, justifyContent:'center', alignItems:'center'}}>
        <ImageBackground source={{uri: 'https://images.pexels.com/photos/1738762/pexels-photo-1738762.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'}} style={{width: 100, 
        height: 100}}/>
      </View>
     <View style={{flex:3}}>  
      <View style={{flex:1, flexDirection:'row'}}>

          <View style={{flex:2, justifyContent: 'center', alignItems:'flex-end', backgroundColor:'blue'}}>
              <Text >Information</Text>
          </View>
          <View style={{flex:1, backgroundColor:'red'}}>
              <Image
              source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
              />
          </View>
      </View>
      <View style={{flex:1 ,flexDirection:'row'}}>

          <View style={{flex:2, justifyContent: 'center', alignItems:'flex-end', backgroundColor:'blue'}}>
              <Text >Settings</Text>
          </View>
          <View style={{flex:1,}}>
              <Image
              source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
              />
          </View>
      </View>
      <View style={{flex:1, flexDirection:'row'}}>

          <View style={{flex:2, justifyContent: 'center', alignItems:'flex-end', backgroundColor:'blue'}}>
              <Text >Favorite</Text>
          </View>
          <View style={{flex:1}}>
              <Image
              source={{uri: 'https://facebook.github.io/react/logo-og.png'}}

              />
          </View>
      </View>


     </View>

    </View>
    );
  }

You can control your text with justifyContent, alignItems and flex in the view above your text section. You can use flex-start and flex-end or center' to displace the items in that View.

Try to follow this link: https://facebook.github.io/react-native/docs/flexbox I hope it helps you.

Saeid
  • 1,996
  • 4
  • 27
  • 44
  • Thanks for your anwer. this is I am trying to build https://res.cloudinary.com/dyvkdwzcj/image/upload/v1546612813/Screenshot_90_x0dihm.png – Basit Jan 04 '19 at 14:46
  • @Basit: I Updated my Code, I hope it helps you. I put some background color so that you can understand the logic better. When you apply anything that you want you can remove the background colours. If it helped you please make this answer as a correct answer. Thanks – Saeid Jan 04 '19 at 15:09