I am developing my first React Native app and I am trying to design a footer for the main screen. To do that I created a view and placed it under the scrollView. Then I tried making a borderTopColor to separate the footer from the rest of the page but it did not work.

home.js

import { StatusBar } from 'expo-status-bar'
import { StyleSheet, Text, View, FlatList, Image, Button, Pressable, ScrollView  } from 'react-native';

import React, {useState, useEffect} from 'react'
import { TextInput } from 'react-native-gesture-handler';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { faUser } from '@fortawesome/free-regular-svg-icons';
import { faAlignJustify, faUser as solidUser} from '@fortawesome/free-solid-svg-icons'
import { faComments as solidComment } from '@fortawesome/free-solid-svg-icons';
import { faComments } from '@fortawesome/free-regular-svg-icons';




export default function Home(props) {

  
  
  const [ current, setCurrent ] = useState("profile")
  const [ user, setUser ] = useState("")


  const curr = (cur) => {
    setCurrent(cur)
  }

  const getData = async () => {
    try {
        const value = await AsyncStorage.getItem('@userauthkey')
        if (value !== null) {
            return value
        } else {
            return false
        }
    } catch (e) {
        console.log(e)
    }
}

useEffect(() => {
    const ch = async () => {
      const c = await getData();
      if (c) {
        setUser(c)
      }
    };
    ch();
  }, []);

  const gprof = (user) => {
    fetch(`http://192.168.5.223:8000/home/checkprofile/`,{
      method: 'POST',
      headers: {
        "Content-Type": 'application/json',
       },
       body: JSON.stringify({'user':user}),

    } )
    .then( res => res.json())
  .then( res => {
    console.log(res.profile)
    console.log(res.sets)
    if (res.sets === false){
      props.navigation.navigate('Profile')
    }

    
  })
  .catch( error => console.log(error))
  }

  
  const logout = async () => {
    try {
      await AsyncStorage.removeItem('@userauthkey')
      props.navigation.navigate('Login')
    } catch(e){
      console.log(e)
    }
  }

  if(current === "profile"){
       return (
        <View style={styles.container}>
            <ScrollView style={styles.scroll} >
                <Text> profile {user} </Text>
                <Pressable onPress={ () => logout()}>
                <Text>Logout</Text>
                </Pressable>
            </ScrollView>
            
            <View style={styles.footer}>
              
              

              <Pressable onPress={() => curr('messanger')}>
              <View style={{ borderWidth: 2, borderStyle: 'solid', borderColor: "white",  borderRadius: 20, padding: 3, }}>

              <FontAwesomeIcon icon={faComments} style={{color: 'white',}} size={25} />
              </View>
              </Pressable>

              <Pressable onPress={() => curr('profile')}>
              <View style={{ borderWidth: 2, borderStyle: 'solid', borderColor: "white", backgroundColor: 'white',  borderRadius: 20, padding: 3, }}>
              <FontAwesomeIcon icon={solidUser} style={{color: 'black', alignContent:"center", } } size={25} />
              </View>

              </Pressable>

            </View>


            <StatusBar style="auto"/>
        </View>
    )
  } else if(current === "posts"){
    return (
        <View style={styles.container}>
            <ScrollView style={styles.scroll} >
                <Text> posts {user} </Text>

            </ScrollView>
            <View style={styles.footer}>
        
            </View>
            <StatusBar style="auto"/>
        </View>
    )
  } else if (current === "messanger"){
    return (
        <View style={styles.container}>
            <ScrollView style={styles.scroll} >
                <Text> messanger {user} </Text>

            </ScrollView>
            <View style={styles.footer}>
              
              

              <Pressable onPress={() => curr('messanger')}>
              <View style={{ borderWidth: 2, borderStyle: 'solid', borderColor: "white", backgroundColor:"white", borderRadius: 20, padding: 3}}>

              <FontAwesomeIcon icon={solidComment} style={{color: 'black',}} size={25} />
              </View>
              </Pressable>

              <Pressable onPress={() => curr('profile')}>
              <View style={{ borderWidth: 2, borderStyle: 'solid', borderColor: "white",  borderRadius: 20, padding: 3}}>
              <FontAwesomeIcon icon={faUser} style={{color: 'white', borderStyle: 'solid', borderColor: "white",  borderRadius: 20}} size={25} />
              </View>
              </Pressable>

            </View>
            <StatusBar style="auto"/>
        </View>
    )
  }

}

Home.navigationOptions = screenProps => ({
    headerLeft: () => null,
    gestureEnabled: false,
    headerStyle: {
      backgroundColor: 'black'
    },
    headerTintColor: 'white',
  
  })

const styles = StyleSheet.create({
    container: {
      flex: 1, 
      backgroundColor: 'black',
      
    },
    
    scroll: {
      backgroundColor:'#'
    },
  
    footer: {
      backgroundColor: 'black',
      borderTopColor: 'dark-gray',
      borderTopWidth: .5 ,
      borderStyle: 'solid',
      padding:50,
      paddingTop:18,
      paddingLeft: 18,
      paddingRight: 18,
      flexDirection: 'row',
      alignContent: "space-between",
      alignItems: "space-between",
      justifyContent: "space-between",
    
    },
  
    label: {
      fontSize: 24,
      color: "white",
      padding: 10,
  
    },
  
    input: {
      fontSize: 24,
      backgroundColor: "white",
      padding: 10,
      margin: 10,
      borderRadius: 5,
      
  
    },
  
  
    
  });

How can I solve the issue?

CodePudding user response：

dark-gray is not a recognized color keyword in React Native. You may be thinking of darkgray. You can find the full list of supported color keywords here: https://reactnative.dev/docs/colors#color-keywords