I have this codes:
var React = require('react-native');
var {
AppRegistry,
MapView,
View,
StyleSheet
} = React;
var Weather = React.createClass({
render: function(){
return <MapView style={styles.map}></MapView>
}
});
const styles = StyleSheet.create({
map: {
flex: 1,
}
});
AppRegistry.registerComponent('Weather', () => Weather);
I just want to test the map, however, when I run it, I got the error:
Seems you're trying to access 'react-native' package. Perhaps you meant to access 'React.createClass' from the 'react' package instead ?
I don' t see what's wrong with the above codes, can you help me out
Thanks
You're importing incorrectly. You need to also import React to be able to use React.createClass, right now you're naming React as the 'react-native' library:
var React = require('react');
var ReactNative = require('react-native');
var {
AppRegistry,
MapView,
View,
StyleSheet
} = ReactNative;
I believe ES6 classes are the recommended way to create react components in React Native. to do that, your component should look something like this:
import React, { Component } from 'react'
import {
AppRegistry,
MapView,
View,
StyleSheet
} from 'react-native'
class Weather extends Component {
render () {
...
}
}
hope this helps.
Related
I am new to react native and I implemented a simple react native drawer but When I'm running this code in my emulator It gives me a type error.
This is my drawr.js code:
import React, { Component } from 'react';
import {View,Text,FlatList} from "react-native";
import {Card} from "react-native-paper";
import {DrawerNavigator} from 'react-navigation'
import lessons from './lessons';
import classes from './classes';
class Drawer extends React.Component{
render() {
return (
<MyApp/>
);
}
}
const MyApp = DrawerNavigator({
lessons:{
screen:lessons
}
})
export default Drawer;
Then I got this error:
How can I fix this error??
Ciao, there are some errors in your code. Try to follow this guide.
I am fairly new to fetching data from an API with React Native, I am using Axios. I'm attempting to fetch categories from an API and list them in a FlatList however it isn't loading on the screen. Here is my code
HomeScreen:
import React from 'react';
import {
View,
Text,
FlatList,
StyleSheet
} from 'react-native';
import ApiData from '../src/api/apiData';
const HomeScreen = () => {
return (
<View>
<FlatList
vertical
data={ApiData.get('/categories')}/>
</View>
);
};
apiData
import axios from 'axios';
export default axios.create({
baseURL:"https://developers.api.com/api/v2.1",
headers: {
'user-key': 'MyKeyGoesHere'
}
})
this is all I've done so far and am a bit lost. Thank you
I updated my code here please check
https://snack.expo.io/SJZC7tJkL
Version:
#react-native-community/async-storage = ^1.6.1
Problem:
Importing AsyncStorage like this:
import { AsyncStorage } from '#react-native-community/async-storage'
Using in my code like this:
AsyncStorage.setItem('locale', locale)
AsyncStorage.getItem('user').then((value) =>
{
...
}
Errors:
TypeError: undefined is not an object (evaluating
'_asyncStorage.AsyncStorage.setItem')
TypeError: undefined is not an object (evaluating '_asyncStorage.AsyncStorage.getItem')
What I've tried
Importing AsyncStorage from 'react-native' gives no problems, only warning that AsyncStorage should be imported from '#react-native-community' because the AsyncStorage from 'react-native' is deprecated.
Tried to uninstall and reinstall '#react-native-community/async-storage'-dependency, that didn't work.
Googling it
Full code:
import React from 'react';
import { View, Image, NativeModules } from 'react-native';
import { AsyncStorage } from '#react-native-community/async-storage'
import { styles } from '../../components/Styles.js';
import { GEOLocation } from '../../scripts/GEOLocation';
import Moment from 'moment/min/moment-with-locales';
export default class SplashScreen extends React.Component {
constructor(props) {
super(props);
this.geo = new GEOLocation();
this.setLocale();
this.bootstrapAsync();
}
bootstrapAsync = async () => {
this.geo.grantAccess()
AsyncStorage.getItem('user').then((value) => {
const user = JSON.parse(value);
this.props.navigation.navigate(user ? 'App' : 'Auth');
})
};
setLocale = () => {
const deviceLocale = NativeModules.I18nManager.localeIdentifier
var locale;
if (deviceLocale.includes('_')) {
var language = deviceLocale.split('_')[0]
var country = deviceLocale.split('_')[1].toLowerCase()
locale = language + '-' + country
} else {
locale = deviceLocale
}
if(Moment.locales().indexOf(locale) > -1 ) {
console.log('device locale')
AsyncStorage.setItem('locale', locale)
} else {
console.log('default locale')
AsyncStorage.setItem('locale', 'en')
}
}
render() {
return (
<View style={styles.container}>
<Image style={styles.leImage} source={require('../../../assets/logo_icon.png')} />
</View>
)
}
}
Here's how to use the correct method for importing.
import AsyncStorage from '#react-native-community/async-storage';
This module is not exported as a react-native, so it must not have a square bracket.
Use in react-native module
import { AsyncStorage } from 'react-native';
#react-native-community/async-storage is now deprecated
Use react-native-async-storage/async-storage
instead.
Note: It does not use brackets. Unlike before when it was one of many things exported from react-native, it is now the default export of #react-native-async-storage/async-storage.
import AsyncStorage from '#react-native-async-storage/async-storage';
Yes my issue resolved by using below
import AsyncStorage from '#react-native-async-storage/async-storage';
before this I was using parentheses and getting error.
I know native-base in a wrapper on react-native library but there are some components which we can import from react-native as well as from native-base also eg., View, Text, etc., Is there any difference between these two imported components. I am new to react native just want to know.
Native Base uses the original react native view and extends it a little bit.
Here is the full code from native base' view:
import React, { Component } from "react";
import PropTypes from "prop-types";
import { View, ViewPropTypes } from "react-native";
import { connectStyle } from "native-base-shoutem-theme";
import mapPropsToStyleNames from "../utils/mapPropsToStyleNames";
class ViewNB extends Component {
render() {
return <View ref={c => (this._root = c)} {...this.props} />;
}
}
ViewNB.propTypes = {
...ViewPropTypes,
style: PropTypes.oneOfType([
PropTypes.object,
PropTypes.number,
PropTypes.array
])
};
const StyledViewNB = connectStyle(
"NativeBase.ViewNB",
{},
mapPropsToStyleNames
)(ViewNB);
export { StyledViewNB as ViewNB };
Source: https://github.com/GeekyAnts/NativeBase/blob/master/src/basic/View.js
I diagnosed more in this and got chain react and kitchen slink which gives more clarity about every component
https://github.com/GeekyAnts/NativeBase
By watching, reading tutorials from variable source, I already known 2 methods that I can override are getInitialState() and render().
I wonder are there any other methods that I can override.
I already searched on Google but I haven't found any official document yet.
Can anybody help me ?
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Image,
Navigator,
View
} from 'react-native';
var LessonList = React.createClass({
getInitialState: function() {
return {
meow:'MeowMeow',
};
},
render:function(){
return(
<Text>
Keep Calm and Meow On !!!
</Text>
);
}
});
List available in Component Specs in React docs.