For creating a Vue Native App, do you need App.js? - expo

This has been addressed twice here, but more of a question of how to get around it. I know how... you can just delete App.js. But my question is whether App.js will be needed down the road once it has been packaged for distribution, or at any other time. If so, I'd rather find another solution other than just deleting the file.
I'll provide the code in App.js. This is the basic file that is created from either vue-native init or expo init.
Looked at previous posts:
Vue native is always executing App.js instead of .vue
App.vue is not working in Vue-Native application
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

If you're using webpack you can get around this by setting the entry point:
module.exports = {
...
entry: 'YourNewEntryPoint'
...
}
Without Webpack I'm not sure if there's a way to get around App.js being the entry point.

Related

Jest: Cannot read property of undefined when importing from own package nextjs

Got this weird bug when running the jest test, one of the UI component from a self defined UI package keeps throwing error, saying that an object in that package is undefined...
The component itself works perfectly fine, and the same component's testing logic works in another repo without nextjs, and that repo utilize #swc/jest for js transform in jest.config file.
I've also added that package itself to transformIgnorePatterns in jest-config file, but somehow the bug still presents...
The project itself is in nextjs, and below is a snapshot of the jest.config file
/** #type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
testPathIgnorePatterns: [
'<rootDir>/.next/',
'<rootDir>/node_modules/',
'<rootDir>/e2e/'
],
preset: 'ts-jest',
testEnvironment: 'jsdom',
setupFilesAfterEnv: ['#testing-library/jest-dom/extend-expect'],
setupFiles: [require.resolve('whatwg-fetch')],
transform: {
'^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }]
},
transformIgnorePatterns: ['/node_modules/myPackage', 'jest-runner'],
testMatch: ['**/*.spec.{js,jsx,ts,tsx}'],
};
and the error itself goes Error: Uncaught [TypeError: Cannot read property 'object' of undefined], which tracks down to /node_modules/myPackage
how the package is used
import { InputBox } from 'myPackage';
const MyComponent = () => {
return (
<div>
<InputBox />
</div>
);
}
export default MyComponent;
and here's the test:
import { act, render } from '#testing-library/react';
import React from 'react';
describe('show component', () => {
it('should render', async () => {
await act(async () => {
render(
<MyComponent/>
);
});
});
});
I've found a similar question on stackoverflow Jest: Cannot read property of undefined when importing from own package
but that one is using regular js, and this one being next.js, there's really nowhere I can update .babelrc to update those configs...
Any input would be appreciated.
Update: it turns out the component that causes me bug is built on top of react-popper library, which is built on top of popper.js library. popper.js library doesn't support jsdom by default, and it requires to do jest mock. But my library is 2 layers abstractions on top of popper.js library, I'm not sure how to do that, or even if that is doable...

Expo Font only displaying custom font in first screen on Android. iOS is working properly

My app is running Expo Font correctly on iOS but not on Android. I've also tried replacing loadAsync with useFonts according to the docs to no avail. I have two separate stylesheets with a baseFont property setting the custom font, but the font is not being read properly for some reason on the other screens. The non-login screens are located in different stacks using React Stack Navigation (#react-navigation/stack). This is basically what the code looks like:
App.js:
import RootStack from './navigations/RootStack';
import mainReducer from './reducers/index';
import { getAsyncStorage } from './actions/AuthActions';
const store = createStore(mainReducer, applyMiddleware(thunk));
store.dispatch(getAsyncStorage());
export default () => {
const [fontLoaded, setFontLoaded] = useState(false);
async function loadResourcesAsync() {
await Promise.all([
Font.loadAsync({
'custom-font': require('./assets/fonts/custom_font.ttf');
}),
]);
setFontLoaded(true);
}
useEffect(() => {
loadResourcesAsync();
});
if (!fontLoaded) return (null);
return (
<Provider store={store}>
<RootStack />
</Provider>
);
};
styles/Login.js:
const styles = StyleSheet.create({
baseFont: {
fontFamily: 'custom-font',
},
Turns out the answer was particular to fontWeight in a stylesheet. Since the custom font didn't have a bold typeface embedded in the .ttf, I had to download the bold version and remove fontWeight: bold from the css.

PushNotications not showing up on AWS PinPoint from #aws-amplify/pushnotification doesn't have configure, onRegeister or onNotification methods on it?

Im trying to setup PushNotiifactions on react-native IOS using AWS Amplify and PinPoint. I followed the instructions on AWS-Amplify to setup push notifications on React Native IOS but I noticed that I'm not getting a token back after some debugging noticed that Notification import is doesn't have configure, onRegeister or onNotification methods
My dependencies:
"dependencies": {
"#aws-amplify/analytics": "^1.2.10",
"#aws-amplify/pushnotification": "^1.0.22",
"aws-amplify-react-native": "^2.1.7",
"react": "16.6.3",
"react-native": "0.58.3"
},
My App.js
import React, { Component } from "react";
import {
StyleSheet,
Text,
View,
PushNotificationIOS,
} from "react-native";
import aws_exports from "./aws-exports";
import Analytics from "#aws-amplify/analytics";
import PushNotification from "#aws-amplify/pushnotification";
// PushNotification need to work with Analytics
Analytics.configure(aws_exports);
Analytics.enable();
PushNotification.configure(aws_exports);
type Props = {};
export default class App extends Component {
componentDidMount(){
console.log('PN',PushNotification);
// get the notification data when notification is received
PushNotification.onNotification(notification => {
// Note that the notification object structure is different from Android and IOS
console.log("in app notification", notification);
// required on iOS only (see fetchCompletionHandler docs: https://facebook.github.io/react-native/docs/pushnotificationios.html)
notification.finish(PushNotificationIOS.FetchResult.NoData);
});
// get the registration token
PushNotification.onRegister(token => {
console.log("in app registration", token);
});
// get the notification data when notification is opened
PushNotification.onNotificationOpened(notification => {
console.log("the notification is opened", notification);
});
}
render() {
return (
Welcome to React Native!
To get started, edit App.js
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10
},
instructions: {
textAlign: "center",
color: "#333333",
marginBottom: 5
}
});
Those PushNotification methods are part of its prototype, you should use something like this:
console.log('PN', Object.getOwnPropertyNames(Object.getPrototypeOf(PushNotification)))
Regarding not getting a token at onRegister, are you testing it on a real device instead of an emulator?

Upload Image to aws S3 using using react native after taking photo using react native camera

I am beginner in react native.I want to upload files to aws s3 once after taking the photo in using react native camera. I am able to take picture using react native camera. Now, I need to upload to s3 bucket. When I search for this, I get many documents and I get confused how to use this.
I have done file uploading to amazon s3 and downloading form s3 using php. But in react native I am not getting how to do this as I am a beginner . I searched in aws s3 file upload documents there I got using php, java and .Net etc..But I did not get for react native.
Can anyone help me to do this.
My code to take image in react native is,
import React, {Component} from 'react';
import {Platform, StyleSheet, Text,TouchableOpacity, View} from 'react-native';
import ImagePicker from 'react-native-image-picker';
import RNS3 from 'react-native-aws3';
export default class App extends Component<Props> {
takePic(){
ImagePicker.showImagePicker({},(responce)=>{
console.log(responce);
const file ={
uri : responce.path,
name : responce.fileName,
type : responce.type,
}
console.log(file);
const config ={
keyPrefix :'uploads/',
bucket : '**',
region :'***',
accessKey:'***',
secretKey :'***',
successActionStatus :201
}
RNS3.put(file ,config)
.then((responce) => {
console.log(responce);
})
})
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome v</Text>
<TouchableOpacity onPress={this.takePic.bind(this)}>
<Text>Take Picture</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
When I select the picture from galary / cliked new photo it gives me below error,
02-05 09:10:52.738 12357 12389 I ReactNativeJS: { uri: '/storage/emulated/0/Pictures/image-cb48f179-5b00-4e0a-93ef-74206f76c4e4.jpg',
02-05 09:10:52.738 12357 12389 I ReactNativeJS: name: 'image-cb48f179-5b00-4e0a-93ef-74206f76c4e4.jpg',
02-05 09:10:52.738 12357 12389 I ReactNativeJS: type: 'image/jpeg' }
02-05 09:10:52.738 12357 12389 E ReactNativeJS: undefined is not an object (evaluating '_reactNativeAws.default.put')
How to resolve this ReactNativeJS: undefined is not an object (evaluating '_reactNativeAws.default.put').
Can you please help me out to resolve this.
I have resolve my error :):).Finally, It got worked after 4 days. So happy.
I have installed react-native-file-upload. Now it works Perfectly.
npm install react-native-file-upload --save

How to test React Native components

I'm trying to figure out how to test React Native (not React JS) components. Even looking at React Native's starter code, its difficult to see how to test it.
var AwesomeProject = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
I've been able to use Babel to transpile the JSX syntax as well as use Mockery to mock the React library methods createClass and StyleSheet.create, but at the end of the day, I can't seem to create any meaningful tests.
You should mock up React Native package as well as set babel transformer and some other settings. Maybe you could check unit tests for my component, React Native Router Flux:
https://github.com/aksonov/react-native-router-flux/tree/master/tests
To run tests with Jest you should replace ReactNative with React using __mocks__ folder, use TestUtils with shallow renderer and maybe react-shallow-renderer-helpers to lookup virtual tree.
I've made sample repository with unit tests here and article about my way through it here
In the end I setup a repo with TravisCI using Mocha for BDD style unit tests. You can see the repo at: https://github.com/sghiassy/react-native-sglistview
Take a look at ReactNative's UIExplorer example project, which is set up with several hybrid XCTest & require('NativeModules').TestModule test suites.
https://github.com/facebook/react-native/tree/master/Examples/UIExplorer/UIExplorerIntegrationTests/js