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/' }} />;
}
}
Related
I have use react-native-photo-editor library to design the image, When I open the app I'm getting this alert automatically.
here is my code and screenshot.
import React, { Component } from 'react';
import { RNPhotoEditor } from 'react-native-photo-editor';
import RNFS from 'react-native-fs';
export default class App extends Component {
componentDidMount() {}
render() {
return RNPhotoEditor.Edit({
path: RNFS.DocumentDirectoryPath + '/image.jpg'
});
}
}
Just I have rendered the element with View tag the alert gone and app working
I am using React Native. Below is my code in app.js.
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Header from './components/Header';
export default function App() {
return (
<View>
</View>
);
}
I made another directory in root and added another js file which is Header.js. It contains below code.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function Header() {
return (
<View>
</View>
);
}
I got an error message below.
The development server returned response error code: 500
The module ./components/Header could not be found
Directory Structure
Please let me know if you need more info.
It should be
const Header = () => {
return (
<View>
</View>
);
}
export default Header
Don't just reload an app, restart packager also.
Please correct your functional header component as:
const Header = () => {
return(
<View>.............</View>
)}
export default Header
And run react-native start and react-native run-android
Replace Header component to this:-
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const Header = ({props}) => { // you can also access props like this
return (
<View>
</View>
);
}
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
code below is mine.
and I am using atom, genie motion.
it saids Duplicate declaration "MyScene" at ~ \index.android.js:20:7
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
export default class MyScene extends Component {
getDefaultProps() {
return {
title: 'MyScene'
};
}
render() {
return (
<View>
<Text>Hi! My name is {this.props.title}.</Text>
</View>
)
}
}
//import MyScene from './MyScene';
class YoDawgApp extends Component {
render() {
return (
<MyScene />
)
}
}
AppRegistry.registerComponent('YoDawgApp', () => YoDawgApp);
It seems that the packager is still looking at your commented out import statement. That seems wrong to me but a quick fix is either:
Remove the commented out code
Change "MyScene" in that commented out code to literally anything else (other then "YoDawgApp")
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.