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
Related
I need to make a simple function that load webpage when open the app,
something like that
onLoad(https://reactnative.dev)
(not sure is that correct, but for example).
Can someone help with an example how can that be done?
this library help you
npm i react-native-webview
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';
// ...
class MyWebComponent extends Component {
render() {
return <WebView source={{ uri: 'https://reactnative.dev/' }} />;
}
}
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 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.
This is my first go at using MobX so this may be a simpler problem than I imagine, but I'm not getting any errors with the things I've tried; the store is simply undefined wherever I try to use it. I've tried both importing the store directly into components and passing props from the main file (also with , but I'm not sure if I used that right). I've experimented with several different .babelrc file settings as well, but that doesn't seem to be an issue.
Here is the UserStore:
import React from 'react';
import { observable } from 'mobx';
class UserStore {
#observable info = {
username: "bob",
password: "secret",
email: "bob#email.com"
}
}
const userStore = new UserStore()
export default userStore;
Here is a simplified App.js:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Profile from './app/Profile.js';
import { UserStore } from './app/UserStore.js';
export default class App extends Component {
constructor(){
super();
this.state = {
page: 'Profile',
}
}
changePage(){
switch (this.state.page) {
case "Profile":
return <Profile logout={this.logout.bind(this)} userStore={UserStore}/>;
}
}
render() {
return (
<View>
{this.changePage()}
</View>
);
}
}
And here is a simplified Profile.js:
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { observer } from 'mobx-react/native';
#observer
export default class Profile extends Component {
render() {
console.log(this.props.userStore);
return (
<View>
<Text>Profile Page</Text>
<Text>username: {props from store go here}</Text>
<Text>password: {props from store go here}</Text>
<Text>email: {props from store go here}</Text>
</View>
);
}
}
All I'm trying to do right now is get the pre-defined observable "info" object from the store to the Profile.js component and display that information. This is being way more difficult than it should be - any insight is greatly appreciated!
Since you declared export default userStore; in UserStore.js
Try changing the way you import in App.js by removing the {}:
import UserStore from './app/UserStore.js';
{} is needed only if you want to do a named import. Here is a good read if you want to know more.
I'm trying to use react-native-navigation as navigation system in my react-native. I've wrote a very simple app for test it, but this app crashes(without giving me any error or info) after the splash screen.
my index.ios.js:
/* eslint-disable no-unused-vars */
import App from './src/app';
my app.ios.js:
import {
Platform
} from 'react-native';
import {Navigation} from 'react-native-navigation';
import { registerScreens } from './screens';
registerScreens(); // this is where you register all of your app's screens
// this will start our app
Navigation.startTabBasedApp({
tabs: [{
label: 'One',
screen: 'AwesomeProject.Home', // this is a registered name for a screen
icon: require('../img/one.png'),
selectedIcon: require('../img/one_selected.png'), // iOS only
title: 'Screen One'
}]
});
my screens.js
import { Navigation } from 'react-native-navigation';
import Home from './containers/Home';
import About from './containers/About';
// register all screens of the app (including internal ones)
export function registerScreens() {
Navigation.registerComponent('AwesomeProject.Home', () => Home);
Navigation.registerComponent('AwesomeProject.About', () => About);
}
my Home.js:
import React, { Component } from 'react';
import { Text } from 'react-native';
class Home extends Component {
render() {
return (
<Text>Home!</Text>
);
}
}
export default Home;
my About.js:
import React, { Component } from 'react';
import { Text } from 'react-native';
class About extends Component {
render() {
return (
<Text>About!</Text>
);
}
}
export default About;
You can see a full gist here: https://gist.github.com/inchr/d0184f4ae91abd6036a2fa61725744c9
I've done very test on how loads the tabs in startTabBasedApp() and I've tried to load only a screen too.
Any idea on the reason of the crash/close after the splash screen ?
Thanks.
Ok the problem was that after I've run: react-native link
I've forgot to edit the AppDelete.m file as explained here:
https://github.com/wix/react-native-navigation/wiki/Installation---iOS#installation---ios
https://github.com/wix/react-native-navigation/blob/master/example/ios/example/AppDelegate.m