I'm a web developer.
I'm starting today at react-native. I was able to install everything and configure vscode with the emulator.
When I run the command: (react-native init myAPP) is creating app.js already with a structure.
My question:
As I come from the web, I know the basis for html development is:
<!DOCTYPE html>
<html>
.
.
.
</html>
What is the basis of react-native development?
I understand that react native does not use html structure, the application is armed with native elements of react native. Use <View> </View> to generate a blank page and place your logic inside.
https://react-native-elements.github.io/react-native-elements/
Related
Im trying to display a video on screen in my react native project (with expo).
I put the video inside the project, and I see the message :
The file is not displayed in the editor because it is either binary or uses an unsupported text encoding
How can I resolve this issue?
As sidverma pointed out, this is a VS Code related error.
You cannot open large files inside the editor as it might crash.
I remember opening large bin files a long time ago with other editors and it would freeze my computer!
Anyhow, you can still use that file inside your React Native application. This is just your editor being careful about opening large files.
If want to use Video in react-native take help of this library: react-native-video
import Video from "react-native-video";
<View>
<Video
source={require("./../assets/video1.mp4")}
style={styles.backgroundVideo}
muted={true}
repeat={true}
resizeMode={"cover"}
rate={1.0}
ignoreSilentSwitch={"obey"}
/>
</View>
Alternative: Expo LINK
i already made couple of Nuxt RND (universal and spa) application.
Now i want to turn those application into native mobile app.
Vue native is one option,but i just want keep everything in a shape with SSR mode
Please give me your valuable suggestions
Thanks Everyone,
Thanks in advance :)
You can also take a look at Capacitor by Ionic, which enables you to build Hybrid apps. It will basically take your built UI, bundle that inside generated native apps and render it through WebView. After you install Capacitor and run npx cap init you might need to set the directory of your built web assets inside capacitor.config.json to "webDir": "dist".
I've got some questions regarding React Native Web. I haven't really wrapped my head around how it works so I'm hoping to get some answers.
Exactly, what happens when we "alias" the React Native to Web?
When working with Expo, why isn't some packages available? For
example, the LinearGradient get's an error saying it can't be found.
I want to use Netlify Identity Widget, but that renders in HTML. How
do I use that with React Native Web?
So in general, how do I develop in React Native Web? I need to know how to port npm packages so I can work with them.
Super thankful for any advice!
Exactly, what happens when we "alias" the React Native to Web?
It means the library react-native-web will convert the react-native components into HTML/CSS tags.
Here an example:
<View>
<Text style={{color: 'red'}}>I'm an awesome text</Text>
</View>
Will become into when rendered on browser:
<div>
<span style="color: red">I'm an awesome text</span>
</div>
When working with Expo, why isn't some packages available? For example, the LinearGradient get's an error saying it can't be found.
Expo offers a very simple way to start developing React Native apps. But it's a closed box where you cannot add community native packages, only the native packages that comes with Expo. There is an exception, the js-only packages, like: https://github.com/crazycodeboy/react-native-check-box
For the native packages, you need to link them in the native side of your app and compile it. To achieve this I suggest you to start in the native development, you can found the path here: https://facebook.github.io/react-native/docs/getting-started#the-react-native-cli
I want to use Netlify Identity Widget, but that renders in HTML. How do I use that with React Native Web?
You can use any package/widget/library that renders HTML, because you will run it on browsers. You can start using it just typing yarn add netlify-identity-widget
or npm install netlify-identity-widget --save into your react-native-web root folder.
Hope I helped!
I have a react native application(using react-native 0.43.3) that uses webview to show a web page used for online banking. That site loads a popup window with the login page.
With the ReactNative WebView this popup window in not shown. In native android to enable popup window showing I found out that I need to make webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true), but couldn't found a way to set this parameter when using ReactNative WebView.
Is there a way which I can achieve this with the WebView provided with ReactNative?
A while back I needed to fork the react-native framework because there is a bug in the iOS WebView when using javaScript bridge between react-native and native (iOS and Android), after some research I came to the conclusion that I must fork the repo in order to fix it so I did.
A week ago I needed the webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(boolean) method as well, so I went ahead and added it in my fork along with view.getSettings().setSupportZoom(boolean) and view.getSettings().setSupportMultipleWindows(supports).
If you want, here is my fork.
Please keep in mind that it means that you need to build react-native for android from source, more info on the matter can be found here, it's a bit of a hustle to be honest, but in some cases it's worth it.
the fork is from react-native 0.44.0, you should also keep in mind that if you use my fork, in means you probably wont be able to update version when they do come out, so it all depends on your needs in the end, worst case scenario you could always fork my fork and merge it with the newest version.
you can fetch my fork with npm by modifying you package.json file and then running npm update react-native
"dependencies": {
//...
"react-native": "samermurad/react-native#rctWebView-legacy-fix",
//...
}
I am planning to extract the fixes and build a separate WebView component, but I am currently too busy for that :/
I hope that helps:)
I literally started reading about ReactNative an hour ago and am reading this git readme https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md
Next I googled about it and found this link which seem to be explaining it but not to me novice in web, react, or react-native
https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md
Can someone explain to me as if I am 2 years old what is the meaning of eject? I keep hearing term "ejected project" but I cannot wrap my head around it.
Summary
If you created an app using create-react-native-app MyApp, ejecting your app gets your app to be the same as if you created your project using react-native init MyApp
aka
create-react-native-app MyApp > make changes to app > eject app
is roughly equivalent to
react-native init MyApp > make changes to app
More Details
What's the difference between create-react-native-app MyApp and react-native init MyApp?
Quick start vs. Full scale development
The philosophy behind create-react-native-app is:
Minimal "Time to Hello World": Create React Native App should reduce the setup time it takes to try building a mobile app to the absolute minimum, ideally on par with React web development (especially as seen with Create React App).
Develop on Your Device: It should be easy to develop on a physical device when you want to test how your app feels and responds to inputs.
One Build Tool: If you just want to get started with React Native, you shouldn't need to install Xcode, Android Studio, NDKs, or mess with environment variables.
No Lock-In: You can always "eject" to your own build setup if you need to write custom native code or modify how your app is built.
Essentially, create-react-native-app lets you get up and running quickly without having to a do a lot of (or any) configuration. In order to do this, it hides a lot of details from you.
If you want to create a serious app, you need to set up a real development environment. You can do this from scratch by running react-native init <project-name>. If you started with a react native project using create-react-native-app, you can get to this same place by "ejecting" your app
More details from the official documentation about getting started with React Native can be found here.
My understanding is that when you run the "create-react-native-app" (or "expo init" now) you are basically adding the Expo library on top of React Native.
I think the main reason for using Expo is to get your app up and running quickly. I think the main reason to eject is that eventually you might need to do more complicated customization with native code and need more control, etc. Here is a better explanation of Expo vs React Native CLI to bootstrap your app:
https://levelup.gitconnected.com/expo-vs-react-native-cli-a-guide-to-bootstrapping-new-react-native-apps-6f0fcafee58f
When you eject you are returning to the same state as if you did not use Expo to setup your app (native ios/android projects will be generated, etc.)
Here are a few other links that helped me understand:
http://www.reactnativeexpress.com/environment
https://docs.expo.io/versions/latest/expokit/eject/