I have just created a new snack and add native base library with the instructions provided by Native base documentation for expo:
Here is the instructions i have followed:
// At the top of your file
import { Font } from 'expo';
import { Ionicons } from '#expo/vector-icons';
// Later on in your component
async componentDidMount() {
await Font.loadAsync({
'Roboto': require('native-base/Fonts/Roboto.ttf'),
'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
...Ionicons.font,
});
}
But It shows Error As Unable to resolve module FontAwesome5.js
Please Suggest me some solution for the same
Here is my Snack Link for the same.
https://snack.expo.io/#simransingh/native-base
Thanks.
Hi I just found the solution for the same ,
It's because of FontAwesome5 not loaded properly ,
You can import it from #expo/vector-icons
Here is the working snack:
https://snack.expo.io/#simransingh/native-base
yep this problem happend to me in snack i just solved it by changing the version of nativebase from latest to previous version
{
"dependencies": {
"react-native-paper": "2.2.8",
"native-base": "latest"
}
}
change to
{
"dependencies": {
"react-native-paper": "2.2.8",
"native-base": "2.12.1"
}
}
Related
Does using expo react native doesn't allow to install native base ?
It is documented in nativebase website. You will have to install expo-font and make some adjustments in App.js. The official documentation link is https://docs.nativebase.io/docs/GetStarted.html#Setup_with_Expo
No, expo doesn't stop you from using any frontend package, because there is a specific way to install native base after installing native-base. Put the following code in your main react-native file
import React, { Component } from 'react';
import { Root } from 'native-base';
import Main from "project directory";
import * as Font from 'expo-font';
import { ActivityIndicator } from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = { loading: true };
}
async componentDidMount() {
await Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
});
this.setState({ loading: false });
}
render() {
if (this.state.loading) {
return (
<Root>
<ActivityIndicator />
</Root>
);
} else {
return (
<Root>
<Main/>//Your main Javascript project file.
</Root>
);
}
}
}
I am writing a simple test using react-native-testing-library (my first steps with that library) in my react native expo app. But I am getting a confused error coming from somewhere inside react-native code base itself. Either there is something wrong with my code or there is a bug with react-native-testing-library npm library.
Here is simple jest test:
describe("AppTitle", () => {
it("should display applicaton title", () => {
const { getByText } = render(<AppTitle />);
expect(getByText('App Name')).toBeTruthy();
});
});
And here is the simple <AppTitle /> component (just a View and a Text)
export const AppTitle = () => {
return (
<View>
<Text>App Name</Text>
</View>
);
};
But I am getting this error when I run the test:
...../Utilities/warnOnce.js:15
const warnedKeys: {[string]: boolean} = {};
^^^^^^^^^^
SyntaxError: Missing initializer in const declaration
at ScriptTransformer.transformAndBuildScript (node_modules/#jest/transform/build/ScriptTransformer.js:471:17)
at ScriptTransformer.transform (node_modules/#jest/transform/build/ScriptTransformer.js:513:25)
at Object.<anonymous> (node_modules/react-native/Libraries/react-native/react-native-implementation.js:14:18)
...
This is a simple and straight forward template. Any help from a react-native + react-native-testing-library would be appreciate.
react: 16.8.3
react-native: fork from Expo 33
jest-expo: "^33.0.2"
react-native-testing-library": "1.7.0"
I resolved this added "preset": "react-native" in jest.config.js file
I am using expo in my project. I have same issue. i forgot to add "preset": "jest-expo" to package.json. i added then the problem solved.
"jest": { "preset": "jest-expo" },
I just installing newer react native with RNVI and i get this error when using RNVI,
BackAndroid is deprecated and has been removed from this package. Use BackHandler instead
but everything is fine when i remove import FontAwesome from 'react-native-vector-icons/FontAwesome'; and <FontAwesome name="icon_name"/>
I've tried to search BackAndroid using vscode and even on RNVI github repo, but I can't find any BackAndroid
How can i fix this issue?
BackAndroid is Deprecated
Don't Worry we have Backhandler instead of BackAndroid
Use "react-native-vector-icons": "^6.2.0",
Use Case :
import { BackHandler } from 'react-native'
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
}
handleBackPress = () => {
this.goBack(); // works best when the goBack is async
return true;
}
React Native's AsyncStorage is never resolving its promise. Here's the code :
import {Component} from 'react';
import React from 'react';
import {AsyncStorage} from 'react-native';
export default class Session extends Component {
componentDidMount() {
console.log('foo');
debugger; // This hits
AsyncStorage.getItem('token').then(() => {
console.log('baz');
debugger; // This never hits
}).catch(() => {
console.log('catch');
debugger; // This never hits
});
debugger; // This hits
console.log('bar');
}
render() {
return (
<React.Fragment>
{this.props.children}
</React.Fragment>
);
}
}
The componentDidMount method logs "foo" and "bar" but not "baz" or "catch"
I'm running this on a GenyMotion Android Emulator.
The behavior is the same whether I'm in remote debug mode or not.
Here's my package.json deps:
"dependencies": {
"#expo/samples": "2.1.1",
"eslint-plugin-react-native": "^3.2.1",
"expo": "29.0.0",
"prop-types": "^15.6.2",
"ramda": "^0.25.0",
"react": "16.3.1",
"react-connect-context": "^1.1.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz",
"react-native-elements": "^1.0.0-beta5",
"react-navigation": "^2.9.3",
"styled-components": "^3.4.2"
}
This is an existing issue with react native. We experienced the same problem a few months ago. Since we were using Expo, we decided to use Expo SecureStore instead of AsyncStorage, and it was fine for our requirements.
More info on the issue can be found here. The title of the issue says that it only happens when remote debugging, but if you look at the comments it happens whether remote debugging or not.
I'm trying to setup a basic React Native Relay project. I'm creating this issue after spending ample of time trying debug the problem without any luck. I'm getting this warning on console and my react native app is not able to make calls to GraphQL server.
Warning: RelayNetworkLayer: Call received to injectImplementation(), but a layer was already injected.
Running application "ExampleApp" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
fetchWithRetries(): Still no successful response after 1 retries, giving up.
Here is my code
index.ios.js
import React, { Component } from 'react';
import Relay from 'react-relay';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import App from './app';
import AppRoute from './route/appRoute';
Relay.injectNetworkLayer(
new Relay.DefaultNetworkLayer("http://localhost:1337/graphy")
);
class ExampleApp extends Component {
render() {
return (
<Relay.RootContainer
Component={App}
route={new AppRoute()}
/>
);
}
}
AppRegistry.registerComponent('ExampleApp', () => ExampleApp);
appRoute.js
'use strict';
import Relay from 'react-relay';
export default class extends Relay.Route {
static queries = {
page: (Component) => Relay.QL`
query {
posts(offset: 0) { ${Component.getFragment('page')} }
}
`,
};
static routeName = 'AppRoute';
}
app.js
'use strict';
import React, {Component} from 'react';
import Relay from 'react-relay';
import {
View,
Text,
} from 'react-native';
class App extends Component {
render() {
console.log('props', this.props);
return(
<View>
<Text>Testing</Text>
</View>
);
}
}
export default Relay.createContainer(App, {
fragments: {
page: () => Relay.QL`
fragment on Viewer {
posts { id, title }
}
`,
}
});
package.json
{
"name": "ExampleApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"babel": "^6.5.2",
"babel-preset-react-native": "^1.8.0",
"babel-relay-plugin": "^0.8.1",
"react": "^0.14.8",
"react-native": "^0.25.1",
"react-relay": "^0.8.1"
}
}
babelRelayPlugin.js
const getBabelRelayPlugin = require('babel-relay-plugin');
const schema = require('../schema.json');
module.exports = { plugins: [getBabelRelayPlugin(schema.data)] };
Here is the full repo link: https://github.com/popstand/react-native-relay-graphql-example
Similar code built with ReactJS and Relay works well on webpage. I'm not able to make it work on React Native. What is possibly going wrong here which is causing this issue?
I would suggest you may check out the F8 App by Facebook. There is definitely a setup script, a main route, a relay container and a schema to be seen.
It's possible that your GraphQL server is returning a bad response. This happened to me and I solve with debug the server (with this).
You can see the code of this example app in: https://github.com/danielfeelfine/react-native-relay