Import JS File Using At Sign Symbol @

Expo SDK
1

I tried importing my index.js located in src/navigation/index.js to App.js using the At Sign Symbol (@) but it shows unable to resolve path to module. Am I missing something important here?

My files structure,

src/navigation/package.json

{
  "name": "@navigation"
}

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux';

import store from './src/store';
import Navigation from '@navigation';

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <View style={styles.container}>
          <Text>Open up App.js to start working on your app!</Text>
          <Navigation />
        </View>
      </Provider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Thanks.

2

@-signs mean something special with npm packages – they are scopes. You can’t use an @-sign in a bare package name.

3

On expo project, I saw some people did use the @-sign to import their components. I wanted to learn using the @-sign to import my components to my js file, so it looks cleaner. Is that possible?

4

They’re using @ for npm scopes, not because it’s cleaner. You should learn what npm scopes are for this to make sense.

1 Like