0

I am new and excited about react-native especially when i found out about native-base and how it works with react-native seamlessly.

I ran into an issue when trying implement Setup to theme NativeBase apps i followed every step and guilds from other tutorials but somehow, its not working for me. I am begining to suspect its a compatibility issue. I would love to get a solution from you guyz.

Below is my package.json file

 {
    "name": "MyProject",
    "version": "0.0.1",
    "private": true,
    "scripts": {
      "start": "node node_modules/react-native/local-cli/cli.js start",
      "test": "jest"
    },
    "dependencies": {
      "native-base": "^2.4.0",
      "react": "16.4.1",
      "react-native": "0.55.4"
    },
    "devDependencies": {
      "babel-jest": "23.4.0",
      "babel-preset-react-native": "4.0.0",
      "jest": "23.4.0",
      "react-test-renderer": "16.4.1"
    },
    "jest": {
      "preset": "react-native"
    }
  }

my App.js

    import React, {Component} from 'react';
    import {Text, View} from 'react-native';

    import {Container, StyleProvider} from 'native-base';

    import getTheme  from './src/themes/components';
    import DouxTheme from './src/themes/variables/DouxTheme';

    import AppHeader from './src/components/appHeader';
    import AppBody from './src/components/appBody';
    import AppFooter from './src/components/appFooter';



    export default class App extends Component {
      render() {
        return (
    //<StyleProvider style={getTheme(DouxTheme)}>
    <Container>
    <AppHeader/>
    <AppBody/>
    <AppFooter/>
    </Container>
    //</StyleProvider>

        );
      }
    }

Error Message

        undefined Unable to resolve module 
        `./App` from `C:\xampp\htdocs\2018\node\MyProject\index.js`: 
        The module `./App` could not be found from 
        `C:\xampp\htdocs\2018\node\MyProject\index.js`. 
        Indeed, none of these files exist:

Project Dir https://github.com/okechukwu0127/react-native/tree/master/

Theme Directory https://github.com/okechukwu0127/react-native/tree/master/src/themes/components

Find Below My Project Structure enter image description here

Okechukwu Eze
  • 155
  • 1
  • 14

1 Answers1

2

The error you are getting is different though and doesn't refer to getTheme. Can you please share your index.js?

undefined Unable to resolve module 
        `./App` from `C:\xampp\htdocs\2018\node\MyProject\index.js`: 
        The module `./App` could not be found from 
        `C:\xampp\htdocs\2018\node\MyProject\index.js`. 
        Indeed, none of these files exist:

Please change the order of imports:

import React from 'react'; import {AppRegistry} from 'react-native'; import {name as appName} from './app.json'; import App from './App';

theberbie
  • 94
  • 1
  • 6
  • /** @format */ `import {AppRegistry} from 'react-native'; import App from './App'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App);` – Okechukwu Eze Jul 16 '18 at 22:36
  • a familier issue/error/complain is found on this link https://github.com/GeekyAnts/NativeBase/issues/1734 – Okechukwu Eze Jul 16 '18 at 22:42
  • As long as the name is defined in app.json, I don't you don't need to import it in index.js , so you can remove import {name as appName} from './app.json'. Just to be safe, please import react as well: import React, {Component} from 'react'; import {AppRegistry} from 'react-native'; import { App } from './App'; AppRegistry.registerComponent('YOURAPPNAME', () => App); Just to confirm, did you mean to comment out the style provider tag? – theberbie Jul 16 '18 at 22:51
  • Yes i mean to comment out the StyleProvider tag. I would like to let you know that the program works perfectly without any issue untill i tried applying a custom theme my introducin getTheme from the path. The problem now is that the path is correct but the program assumes the path is wrong – Okechukwu Eze Jul 16 '18 at 23:00
  • In that case, please share ./src/themes/components in your question so we can see whether any of the new files have erroneous references – theberbie Jul 16 '18 at 23:11
  • I have been able to share the content of /theme/components on git https://github.com/okechukwu0127/react-native/tree/master/src/themes/components – Okechukwu Eze Jul 16 '18 at 23:40
  • 1
    Thanks for sharing the repo. Please change the order of imports: ` import React from 'react'; import {AppRegistry} from 'react-native'; import {name as appName} from './app.json'; import App from './App'; ` – theberbie Jul 17 '18 at 03:26
  • Thanks... using ur order of import now – Okechukwu Eze Jul 17 '18 at 08:17
  • The program suddenly started working after using ur order or importing.. But i realized that any changes i make on the new theme does not reflect on my UI components like the button:active, bg color and other... Thanks once more for ur assistance – Okechukwu Eze Jul 19 '18 at 11:42