Where can I request codes based on a image?

See more:

react-native

Hello, I am trying to get help on how to structure the styles on my react native application.

I want to request the styles of this image, how I need to organize the flex, flexDirection, etc..


Image Request.

What I have tried:

<pre>import React from 'react';
import {
  Dimensions,
  ImageBackground,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
} from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Entypo from 'react-native-vector-icons/Entypo';
import Feather from 'react-native-vector-icons/Feather';
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import colors from '../utils/colors';
import s from '../utils/styles';

Ionicons.loadFont();
Feather.loadFont();
AntDesign.loadFont();
Entypo.loadFont();
MaterialIcons.loadFont();
MaterialCommunityIcons.loadFont();
const {width, height} = Dimensions.get('window');

const CoachProfileScreen = ({route, navigation}) => {
  const {name, image} = route.params;

  return (
    <View style={[s.flexOne]}>
      <StatusBar barStyle={'light-content'} />
      {/* ---------- IMAGE BACKGROUND ---------- */}
      <ImageBackground source={image} style={styles.backgroundImage}>
        <TouchableHighlight>
          <Ionicons
            name="arrow-back"
            size={20}
            color={colors.PRIMARY_COLOR_DARK}
          />
        </TouchableHighlight>
      </ImageBackground>
      <ScrollView
        style={[s.flexOne, styles.bottomContainer]}
        contentContainerStyle={styles.contentContainer}>
        <Text style={{color: 'blue'}}>Bottom Container</Text>
      </ScrollView>
    </View>
  );
};

export default CoachProfileScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  contentContainer: {
    backgroundColor: 'lime',
  },
  backgroundImage: {
    height: height * 0.5,
    width: '100%',
    flex: 1,
  },
  bottomContainer: {
    backgroundColor: 'white',
    borderTopLeftRadius: 10,
    borderTopLeftRadius: 10,
    paddingBottom: 100,
  },

  coachImage: {
    width: width * 1,
    height: height * 1,
  },
});