React Native Project Structure Issue

Question

I’ve just started using react native and expo and I’ve been restructuring folders over and over again because I run into multiple errors where a js file can’t find an image that’s located under ./asses/navigation/the_image.png. The only time I got it to work was having all the js files within the App.js and have the App.js located under “./” and the pictures in the same location.

This is what the error looks like: error

And this is what my project structure looks like: project structure

What’s the proper way to structure my project and how can I get files such as my profile.js to find images in assets?

Code for messages.js:

import 'react-native-gesture-handler';
import React, { useState } from 'react';
import { Image, StyleSheet, TouchableOpacity, View, TextInput } from 'react-native';

export default function messages({ navigation })
{
  const [filtertext, setfilter] = useState('');
  return(
    <View style={styles.home_container}>
      <View style={styles.home_background}>
        <TextInput
          style= {styles.filter} 
          placeholder= "Search"
          placeholderTextColor= "#96a7af"
          onChangeText={filtertext => setfilter(filtertext)}
          defaultValue={filtertext}
        />

        <Image source= {require ('./assets/navigation/3_Elements_Circled_Navigation_Message_On.png')}/> 

        <TouchableOpacity onPress={() =>navigation.navigate('Home')} style={styles.home_button}>        
          <Image source= {require ('./assets/buttons/new_message_icon.png')} style={styles.new_msg_buton}/> 
        </TouchableOpacity>

        <TouchableOpacity onPress={() =>navigation.navigate('Profile')} style={styles.profile_button}>        
          <Image source= {require ('./assets/buttons/profile_icon.png')}/> 
        </TouchableOpacity>

      </View>
    </View>
  );
}

const styles = StyleSheet.create(
{
  new_msg_buton:
  {
    position:'absolute',
    height: 60,
    width: 60,
    top: -696,
    left: 129,
  },

  filter:
  {
    position: 'absolute',
    height: 54,
    width: 275,
    top: -660,
    left: 19,
    paddingLeft: 20,
    borderColor: 'black',
    borderRadius: 23,
    borderTopWidth: 3,
    borderBottomWidth: 3,
    borderLeftWidth: 3,
    borderRightWidth: 3,
  }
})

Rather than posting the images on another site, paste the code directly here. Not everyone will click a link leading outside their current tab. reviewing and making corrections is also easier that way — web_walkerX
– web_walkerX, Commented May 20, 2020 at 0:15
import image from '../assets/navigation/change_to_image_name.png'; // should works — Mustafa
– Mustafa, Commented May 20, 2020 at 1:00

web_walkerX · Accepted Answer · 2020-05-20 00:10:08Z

1

Using ./ refers to the current directory the file is located in

Using ../dir_onelevel_above refers to the dir_onelevel_above as you've gone one level above in the folder structure.

That being said, your should need ../assets/navigation/icon.png to access the image from messages.js

answered May 20, 2020 at 0:10

web_walkerX

89011 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

web_walkerX Over a year ago

if this answer works for you, click the tick ✅ to help others find it

Collectives™ on Stack Overflow

React Native Project Structure Issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related