Im running an expo managed react native project and I can't figure this out for the life of me. When I first initialized Expo I had the typical splash screen show, but now, I can't see my splash screen at all it just shows a blank white screen (No errors either). Everything else works perfectly in terms of post splash loading, but i really need help getting the splash to show.
What I've Tried:
Running on iOS simulator, iOS device, Android simulator (Same thing)
Remove node_modules and package-lock.json and run 'npm i'
Cleared cache for both Expo and npm
Replaced app.js return statement with just <View><Text>...</Text></View> and still nothing.
Here's my setup:
package.json
{
"name": "placeholder",
"version": "1.0.0",
"description": "placeholder",
"main": "node_modules/expo/AppEntry.js",
"type": "commonjs",
"private": true,
"scripts": {
"type:check": "npx tsc",
"format:check": "prettier --check \"src/**/*\"",
"format:write": "prettier --write \"src/**/*\"",
"lint:check": "eslint \"App.tsx\" \"src/**/*\"",
"lint:fix": "eslint --fix \"App.tsx\" \"src/**/*\"",
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"engines": {
"node": "16.x"
},
"dependencies": {
"#react-native-async-storage/async-storage": "~1.17.3",
"#react-navigation/drawer": "^6.4.3",
"#react-navigation/native": "^6.0.11",
"#react-navigation/native-stack": "^6.7.0",
"#react-navigation/stack": "^6.2.2",
"#reduxjs/toolkit": "^1.8.4",
"dotenv": "^16.0.1",
"expo": "~46.0.6",
"expo-status-bar": "~1.4.0",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "0.69.4",
"react-native-gesture-handler": "~2.5.0",
"react-native-reanimated": "~2.9.1",
"react-native-screens": "~3.15.0",
"react-native-web": "~0.18.7",
"react-redux": "^8.0.2",
"styled-components": "^5.3.5",
"expo-screen-orientation": "~4.3.0",
"expo-splash-screen": "~0.16.1",
"react-native-safe-area-context": "4.3.1"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#redux-devtools/core": "^3.13.1",
"#types/react": "~18.0.14",
"#types/react-native": "~0.69.1",
"#types/react-redux": "^7.1.24",
"#types/styled-components": "^5.1.26",
"#types/styled-components-react-native": "^5.1.3",
"#typescript-eslint/eslint-plugin": "^5.33.1",
"eslint": "^8.22.0",
"eslint-config-standard-with-typescript": "^22.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-n": "^15.2.4",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"prettier": "^2.7.1",
"typescript": "^4.7.4"
}
}
app.json
{
"expo": {
"name": "placeholder",
"slug": "placeholder",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"userInterfaceStyle": "light",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "cover",
"backgroundColor": "#1D1A1F"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": true,
"requireFullScreen": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/images/adaptive-icon.png",
"backgroundColor": "#1D1A1F"
}
},
"web": {
"favicon": "./assets/images/favicon.png"
}
}
}
babel.config
module.exports = function (api) {
api.cache(true)
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin']
}
}
app.tsx
import 'react-native-gesture-handler'
import Constants from 'expo-constants'
import { useState, useEffect } from 'react'
import { useFonts } from 'expo-font'
import * as SplashScreen from 'expo-splash-screen'
import * as ScreenOrientation from 'expo-screen-orientation'
import AsyncStorage from '#react-native-async-storage/async-storage'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { Provider } from 'react-redux'
import { ThemeProvider } from 'styled-components/native'
import store from './src/redux/store'
import { lightTheme, darkTheme } from './src/res/theme/theme'
import Loading from './src/screens/loading/loading'
import { logger } from './src/logger/logger'
import Application from './src/components/application/application'
// Function to keep the splash screen visible while we fetch resources
SplashScreen.preventAutoHideAsync()
.then((data) => logger.log(`SplashScreen.preventAutoHideAsync() succeeded: ${data.toString()}`))
.catch(logger.warn)
logger.log('NODE_ENV: ', Constants?.manifest?.extra?.env) //eslint-disable-line
export const App = (): JSX.Element => {
const [fontsLoaded] = useFonts({
SedgwickAveDisplay: require('./assets/fonts/sedgwick-ave-display/SedgwickAveDisplay-Regular.ttf'),
QuicksandRegular: require('./assets/fonts/Quicksand/static/Quicksand-Regular.ttf'),
QuicksandSemiBold: require('./assets/fonts/Quicksand/static/Quicksand-SemiBold.ttf'),
QuicksandBold: require('./assets/fonts/Quicksand/static/Quicksand-Bold.ttf')
})
const [loading, setLoading] = useState(true)
const [theme, setTheme] = useState('light')
const selectedTheme = theme === 'dark' ? darkTheme : lightTheme
// Load the app here
useEffect(() => {
// Hide splash screen after 2 seconds
setTimeout(() => {
SplashScreen.hideAsync()
.then((data) => logger.log(`SplashScreen.hideAsync() succeeded: ${data.toString()}`))
.catch(logger.warn)
}, 2000)
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP)
.then(() => {
logger.log('ScreenOrientation.lockAsync() succeeded')
return AsyncStorage.getItem('#theme')
})
.then((data) => {
if (data) setTheme(data)
setLoading(false)
})
.catch((e) => {
logger.warn(e)
setLoading(false)
})
}, [])
if (loading || !fontsLoaded) {
return <Loading />
}
return (
<SafeAreaProvider>
<Provider store={store}>
<ThemeProvider theme={selectedTheme}>
<Application />
</ThemeProvider>
</Provider>
</SafeAreaProvider>
)
}
export default App
Any help with this would be greatly appreciated, thank you!
Related
I am developing a e-commerce site. everything works fine in localhost. but after deployment in live server this error pops up. After reloading the page again the error goes away.
Code:
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
getProducts as fetchProducts,
selectProductList,
} from "../store/reducers/Products";
import { Rings } from "react-loader-spinner";
import { AppDispatch } from "../store/store";
import Layout from "../components/Layout";
import ProductListTable from "../components/product/ProductList";
import { selectUserInfo } from "../store/reducers/Auth";
import Router from "next/router";
const ProductList = () => {
const dispatch = useDispatch<AppDispatch>();
const products = useSelector(selectProductList);
const userInfo = useSelector(selectUserInfo);
const hasAccess =
userInfo?.permissions.find((item) => item.name === "product.update") ||
userInfo?.permissions.find((item) => item.name === "product.delete") ||
userInfo?.permissions.find((item) => item.name === "product.read");
useEffect(() => {
dispatch(fetchProducts());
}, []);
useEffect(() => {
if (userInfo) {
if (!hasAccess) {
Router.push("/");
}
}
}, [userInfo]);
return (
<Layout>
{userInfo && products && products.length > 0 ? (
<div className="p-5">
<ProductListTable products={products} />
</div>
) : (
<div className="flex h-full w-full justify-center mt-[20%]">
<Rings color="#377D71" height={200} width={200} />
</div>
)}
</Layout>
);
};
export default ProductList;
this is the main page. here I am loading the ProductListTable
component
I am fetching products in useEffet
I am using(package.json):
{
"name": "project name",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev -p 3001",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#headlessui/react": "^1.6.5",
"#heroicons/react": "^1.0.6",
"#reduxjs/toolkit": "^1.8.2",
"apexcharts": "^3.36.3",
"axios": "^0.27.2",
"evergreen-ui": "^6.10.1",
"flowbite": "^1.4.7",
"flowbite-react": "0.0.27",
"heroicons": "^1.0.6",
"next": "12.1.6",
"react": "18.2.0",
"react-apexcharts": "^1.4.0",
"react-dom": "18.2.0",
"react-loader-spinner": "^5.1.5",
"react-redux": "^8.0.2",
"react-slick": "^0.28.1"
},
"devDependencies": {
"#faker-js/faker": "^7.4.0",
"#types/node": "18.0.0",
"#types/react": "18.0.14",
"#types/react-dom": "18.0.5",
"autoprefixer": "^10.4.7",
"eslint": "8.18.0",
"eslint-config-next": "12.1.6",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.3",
"typescript": "4.7.4",
"#types/react-slick": "^0.23.8"
}
}
This error indicates there is a problem with one of the imports.
you should also try using useRouter hook of NextJs instead of directly importing Router object in client app. more details
Check this answer and please share detailed error message incase this information does not help.
Built an apk for android, splash screen hangs at startup. But when I use the application at the expo itself, everything works fine. I use the stack (react-native expo).
below I indicated the files App.js and paŃkage.json
import React from 'react';
import { Provider } from 'react-redux';
import Home from './src';
import store from './src/redux/store/index';
import { LogBox, View } from 'react-native';
import { useEffect, useCallback, useState } from 'react';
import \* as Font from "expo-font";
import \* as SplashScreen from 'expo-splash-screen';
function App() {
const \[fontLoaded, setFontLoaded\] = useState(false);
useEffect(() =\> {
async function prepare() {
try {
await Font.loadAsync({
"sf-pro-text": require("./assets/fonts/sf-pro-text-medium.otf"),
});
await new Promise(resolve =\> setTimeout(resolve, 2000));
} catch (e) {
console.warn(e);
} finally {
setFontLoaded(true);
}
}
prepare();
}, \[\])
const onLayoutRootView = useCallback(async () =\> {
if (fontLoaded) {
await SplashScreen.hideAsync();
}
}, \[fontLoaded\]);
if (!fontLoaded) {
return null;
}
LogBox.ignoreAllLogs();
console.error = (error) =\> error.apply;
return (
\<Provider store={store}\>
\<Home /\>
\</Provider\>
);
}
export default App;
to download fonts I use splashscreen, app.js code
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#expo/ngrok": "^4.1.0",
"#expo/vector-icons": "^13.0.0",
"#react-native-async-storage/async-storage": "\~1.17.3",
"#react-native-community/datetimepicker": "6.5.2",
"#react-native-community/hooks": "^2.8.1",
"#react-native-community/slider": "4.2.4",
"#react-navigation/bottom-tabs": "^6.0.4",
"#react-navigation/native": "^6.0.2",
"#react-navigation/stack": "^6.0.2",
"axios": "^0.21.1",
"dateformat": "^4.6.3",
"expo": "^47.0.0",
"expo-av": "\~13.0.2",
"expo-constants": "\~14.0.2",
"expo-linear-gradient": "\~12.0.1",
"expo-notifications": "\~0.17.0",
"expo-screen-orientation": "\~5.0.1",
"expo-status-bar": "\~1.4.2",
"expo-video-player": "^2.0.1",
"link": "^0.1.5",
"moment": "^2.29.1",
"ngrok": "^4.2.2",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-native": "0.70.5",
"react-native-gesture-handler": "\~2.8.0",
"react-native-maps": "1.3.2",
"react-native-pager-view": "6.0.1",
"react-native-safe-area-context": "4.4.1",
"react-native-svg": "13.4.0",
"react-native-svg-transformer": "^0.14.3",
"react-native-switch": "^2.0.0",
"react-native-tab-view": "^3.1.1",
"react-native-web": "\~0.18.9",
"react-redux": "^7.2.4",
"redux": "^4.1.1",
"redux-thunk": "^2.3.0",
"expo-splash-screen": "\~0.17.5",
"expo-font": "\~11.0.1"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
this is the package.json all the libraries that I have included
I am always getting this error whenever trying to test my file using jest and react-testing-library
error --
Details:
/Users/user/dev/system-wheels/src/Constants/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { MAP_API_KEY } from "../config.local";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (node_modules/jest-cli/node_modules/jest-runtime/build/index.js:1517:14)
at Object.<anonymous> (node_modules/graceful-fs/polyfills.js:1:99)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 0.777 s
Ran all test suites matching /Loginpage.test.js/i.
error Command failed with exit code 1.
Here is my package.json-
{
"name": "system-wheels",
"version": "0.1.0",
"private": true,
"dependencies": {
"#firebase/app": "^0.6.29",
"#firebase/messaging": "^0.7.15",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"#testing-library/user-event": "^13.2.1",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-places-autocomplete": "^7.3.0",
"react-redux": "^7.2.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-window": "^1.8.6",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"storage": "file:./src/Packages/Storage/",
"styled-components": "^5.2.1",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "bash ./scripts/init.sh && react-scripts start",
"build": "bash ./scripts/init.sh && react-scripts build",
"test": "bash ./scripts/init.sh && react-scripts test --transformIgnorePatterns \"node_modules/(?!#toolz/allow-react)/\" --env=jsdom",
"test2": " jest",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"alias": {
"modules": "src/Modules/",
"components": "src/Common/Components/",
"hooks": "src/Hooks/",
"helper": "src/Helper/",
"common": "src/Common/",
"globalStyles": "src/GlobalStyles/",
"constants": "src/Constants/",
"assets": "src/Assets/",
"context": "src/Context/",
"route": "src/Routes/"
},
"devDependencies": {
"#babel/plugin-transform-modules-commonjs": "^7.15.0",
"#babel/plugin-transform-runtime": "^7.15.0",
"#babel/preset-env": "^7.15.0",
"#babel/preset-react": "^7.14.5",
"#babel/runtime": "^7.15.3",
"babel-jest": "^27.1.0",
"jest": "^27.1.0",
"ts-jest": "^27.0.5"
}
}
Here is my - babel.config.js
module.exports = {
presets: [
["#babel/preset-env", { targets: { node: "current" } }],
"#babel/preset-react",
],
};
Here is my - jest.config.js
module.exports = {
preset: "ts-jest",
testEnvironment: "jest-environment-jsdom",
transform: {
"^.+\\.(ts|tsx)?$": "ts-jest",
"^.+\\.(js|jsx)?$": "babel-jest",
},
moduleNameMapper: {
"^constants$": "<rootDir>/src/Constants/",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
"<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
"^modules(.*)$": "<rootDir>/src/Modules/",
"^helper$": "<rootDir>/src/helper/",
"^context$": "<rootDir>/src/Context/",
"^route(.*)$": "<rootDir>/src/Routes/",
"^assets(.*)$": "<rootDir>/src/Assets/",
"^globalStyles(.*)$": "<rootDir>/src/GlobalStyles/",
"^common(.*)$": "<rootDir>/src/Common/",
"^hooks(.*)$": "<rootDir>/src/Hooks/",
"^components(.*)$": "<rootDir>/src/Common/Components/",
},
};
Here is the unit test
import "#testing-library/jest-dom";
import React from "react";
import { render, fireEvent, waitFor, screen } from "#testing-library/react";
import LoginPage from "../Views/LoginPage";
describe("Login page testing", () => {
let wrapper;
beforeEach(() => {
wrapper = render(<LoginPage />);
});
test("should contain input fields", () => {
screen.getByLabelText("Your Email");
screen.getByLabelText("Password");
});
});
Here is the LoginPage component
import React, { useState, useCallback } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import Form from "./Form";
import { loginUser, updateLoginType } from "../../../Common/ActionCreators";
import useAlert from "../../../Hooks/useAlert";
import Path from "../../../Routes/Path";
import BACK_IMAGE from "../assets/background.png";
import SOFTWARE_IMAGE from "assets/OMS.svg";
import { ViewPortContainer, BackgroundImage, SoftwareLogo } from "../styles";
const { companySelection } = Path.authorized;
const LoginPage = ({ loginUser, history, updateLoginType }) => {
const [inProgress, updateProgress] = useState(false);
const { showAlert } = useAlert();
const navigateToCompanySelectionPage = () => {
history.replace(companySelection.view.path);
};
const onFormSubmit = useCallback(async (values, resetForm) => {
const { login_email, login_password, login_loginAs } = values;
try {
updateProgress(true);
updateLoginType({ isLoggedInAsAdmin: Boolean(login_loginAs) });
await loginUser({
emailOrMobile: login_email.toLowerCase(),
password: login_password,
isAdmin: Boolean(login_loginAs),
});
updateProgress(false);
navigateToCompanySelectionPage();
} catch (err) {
updateProgress(false);
showAlert({ message: err[0], type: "error" });
}
}, []);
return (
<ViewPortContainer>
<SoftwareLogo src={SOFTWARE_IMAGE} />
<BackgroundImage src={BACK_IMAGE} />
<Form onFormSubmit={onFormSubmit} inProgress={inProgress} />
</ViewPortContainer>
);
};
const mapDispatchToProps = (dispatch) =>
bindActionCreators(
{
loginUser,
updateLoginType,
},
dispatch
);
export default connect(null, mapDispatchToProps)(LoginPage);
I am stuck at this problem for days, please Help
I've followed instructions here: https://www.npmjs.com/package/chai-jest-snapshot
I'm using the Create-React-App starter kit and am trying to write basic Jest tests for it.
I read here that we are not suppose to install jest if we are using that kit, so here is my full package.json.
{
"name": "bitcoin",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"test": "jest"
},
"now": {
"name": "bitcoin",
"engines": {
"node": "8.11.3"
},
"alias": "leongaban.com"
},
"dependencies": {
"axios": "^0.18.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-redux": "^5.0.7",
"react-scripts": "1.1.5",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"chai": "^4.1.2",
"chai-jest-snapshot": "^2.0.0",
"enzyme": "^3.4.4",
"enzyme-adapter-react-16": "^1.2.0",
"react-test-renderer": "^16.4.2",
"sinon": "^6.1.5"
}
}
My Test:
import React from 'react';
import renderer from 'react-test-renderer';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import sinon from 'sinon';
import BitcoinWidget from './bitcoinWidget';
const props = {
logo: 'foo',
coin: {
price: 0
},
refresh: jest.fn()
};
// describe('<BitcoinWidget />', () => {
// it('renders three <BitcoinWidget /> components', () => {
// const wrapper = shallow(<MyComponent {...props}/>);
// expect(wrapper.find('header').length).toBe(1);
// });
// });
describe('Layout', () => {
test('renders children correctly', () => {
const wrapper = renderer
.create(
<BitcoinWidget {...props}/>
)
.toJSON();
expect(wrapper).to.matchSnapshot();
});
});
And finally the component I'm testing:
import React from 'react';
const BitcoinWidget = ({ logo, coin : { price }, refresh }) => {
return (
<div className="bitcoin-wrapper shadow">
<header>
<img src={logo} alt="Bitcoin Logo"/>
</header>
<div className="price">
Coinbase
${price}
</div>
<button className="btn striped-shadow white" onClick={refresh}>
<span>Refresh</span>
</button>
</div>
);
}
export default BitcoinWidget;
Any thoughts?
It was a problem with the packages, I didn't even need to use chai at all.
Here is my new package.json
Note the added "jest": config section:
{
"name": "bitcoin",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"test": "jest src",
"test:watch": "jest src --watch"
},
"now": {
"name": "bitcoin",
"engines": {
"node": "8.11.3"
},
"alias": "leongaban.com"
},
"jest": {
"moduleNameMapper": {
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
]
},
"dependencies": {
"axios": "^0.18.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-redux": "^5.0.7",
"react-scripts": "1.1.5",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"chai": "^4.1.2",
"chai-jest-snapshot": "^2.0.0",
"enzyme": "^3.4.4",
"enzyme-adapter-react-16": "^1.2.0",
"enzyme-to-json": "^3.3.4",
"identity-obj-proxy": "^3.0.0",
"react-test-renderer": "^16.4.2",
"sinon": "^6.1.5"
}
}
And no my test works without chai:
import React from 'react';
import renderer from 'react-test-renderer';
import Adapter from 'enzyme-adapter-react-16';
import { configure, shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
// import { expect } from 'chai';
// import sinon from 'sinon';
configure({ adapter: new Adapter() });
import BitcoinWidget from './bitcoinWidget';
let wrapper;
const props = {
logo: 'foo',
coin: {
price: 0
},
refresh: jest.fn()
};
describe('<BitcoinWidget /> layout', () => {
beforeEach(() => {
wrapper = shallow(<BitcoinWidget {...props}/>);
});
it('renders correct markup', () => {
expect(wrapper.find('header').length).toBe(1);
expect(wrapper.find('button').length).toBe(1);
});
it('should render a component matching the snapshot', () => {
const tree = toJson(wrapper);
expect(tree).toMatchSnapshot();
expect(wrapper).toHaveLength(1);
});
});
I am getting the following error when I am trying to build my React Native bundle.
Syntax Error components/Example/index.js: Unexpected token, expected ; (1:20)
I am not sure if it's a problem with my eslint/babel configs. Here are the files.
components/Example/index.js
export default from './View'
components/Example/View.js
import React, { Component, PropTypes, Button } from 'react';
import { connect } from 'react-redux'
import { updateExampleData } from '../../actions/example'
class Example extends Component {
static propTypes = {
title: PropTypes.string.isRequired,
navigator: PropTypes.object.isRequired,
exampleProp: PropTypes.object.isRequired
}
const incrementData = () => {
const newIncrement = this.props.exampleProp + 1
updateExampleData(newIncrement)
}
render() {
return (
<View>
<Text>exampleData: {this.props.exampleProp} </Text>
<Button
onPress={incrementData}
title="Increment Data"
color="#841584"
/>
</View>
)
}
}
const mapStateToProps = (state, props) => {
const exampleProp = state.example.example
const newProps = {
exampleProp: exampleProp
}
return newProps
}
export default connect(mapStateToProps)(Example)
package.json
{
"name": "SportsApp",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-eslint": "^7.2.3",
"babel-preset-react-native": "^3.0.2",
"eslint": "^4.5.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.1.1",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^7.3.0",
"eslint-plugin-standard": "^3.0.1",
"jest-expo": "~19.0.0",
"react-native-orientation": "^3.0.0",
"react-native-orientation-listener": "0.0.4",
"react-native-scripts": "1.1.0",
"react-native-tableview-simple": "^0.16.8",
"react-redux": "^5.0.5",
"react-test-renderer": "16.0.0-alpha.12",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.2.0"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^19.0.0",
"react": "16.0.0-alpha.12",
"react-native": "^0.46.1"
}
}
eslint.json
{
"parser": "babel-eslint",
"env": {
"browser": true
},
"plugins": [
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"rules": {
}
}
.babelrc
{
"presets": ["react-native"]
}
I have written react-redux before but I did not do the parsing configurations for that project so I am wondering if the syntax error has something to do with that. I am pretty sure my index.js files for the components were written with the same syntax as that in the provided file where the syntax error is.
Can you try the following?
export { default } from './View'
In your index.js