NEW WAVE OF WRITING REACT-NATIVE

Olabisim — Wed, 25 May 2022 10:43:08 +0000

Doing react-native for some while is the best decision I have made. React-native comes with a lot import components to create something simple and I have found the best way for your code structure.

I will start by showing a simple react native app from react-native docs and the new wave of writing react-native

`import React from ‘react’;
import { Text, View } from ‘react-native’;

const YourApp = () => {
return (

Try editing me! 🎉

);
}`

export default YourApp;

A normal react-native developer will know you would have to write multiple view statements to keep your design and layout in sync, with multiple texts as the case maybe.

As I continue to write react-native along the way I found you could simplify your code to the simplest form by using the as keyword in imports.

This is a very good example from my code.
`
import { StyleSheet as SS, Text as T, View as V, Image as I, Dimensions as D } from ‘react-native’;

import { Entypo, Ionicons, MaterialIcons } from ‘@expo/vector-icons’;

const MiniCard = () => {

return (

source={{uri: “https://media.istockphoto.com/photos/teenage-girl-walking-on-sea-pier-picture-id683607708?b=1&k=20&m=683607708&s=170667a&w=0&h=ADhvhBmJqCAIyY5Q6Id4Lmx_XzsAXDxsvIhmlS4AtcY="}}

style={{

width: ‘45%’,

height: 100

}}

style={{ fontSize:17, width: D.get(“screen”).width/2}}

ellipsizeMode=”tail”

numberOfLines={3}

This is an amazing course this is an amazing course this is an amazing course this is an amazing course this is an amazing course

coders never quit

)

}
export default MiniCard`

Using the as keyword, I capitalized the first letter of each component as the new name.

using only the first capitalized letter makes my code much more simplistic and readable, creating enough space for inline styling, component props like style and so on.

I have always tried to make my code more simple as possible and neat, This is the best way so far to make your code more neat and easily readable. Being familiar with this comes with a lot of possibilities, ordinary a D means Dimensions. Instead of writing Dimensions all over again anywhere you need it, you just have to write D.

As previewed, some inbuilt components starts with the same letter like ScrollView and StyleSheet, so i break them into syllables and use them as they sound, e.g scroll-view, try pronouncing that at once you will get skrrrriew, lol or whatever that may sound like, ScrollView as SV and StyleSheet as SS, that makes it much better and much simplistic because you don’t have to write much code in comparison to the normal way.

I consider this new wave of writing react-native as it enhances readability, good code structure and promotes simplicity.

https://github.com/Olabisim/youtube you can download my code on github to get a preview of how it looks

I would love to hear your comments about this.

Thank yyou.

SETTING UP A REACT-NATIVE DESKTOP APP IN 5 MINUTES...

Olabisim — Tue, 19 Apr 2022 22:00:26 +0000

NOTE: I AM WRITING THIS BLOG BASED ON THE ISSUES I FACED BEFORE CREATING A SIMPLE REACT NATIVE DESKTOP APP

SYSTEM REQUIREMENTS

You can run React Native for Windows apps only on:

All Windows 11 devices
Windows 10 devices with Windows version: 10.0.16299.0 (aka 1709, aka Redstone 3, aka Fall Creators Update) or higher Some features may not work on all versions. See Windows 10 Compatibility for version support details.

Install the development dependencies

To check or install dependencies, run the script rnw-dependencies.ps1 (.ps1 means it is a powershell file) in an elevated PowerShell window.

Run this command: Start an elevated admin PowerShell window and run:

Set-ExecutionPolicy Unrestricted -Scope Process -Force;
iex (New-Object System.Net.WebClient).DownloadString('https://aka.ms/rnw-deps.ps1')

(run one by one)

The above command will turn on developer mode and install Visual Studio, the Chocolatey package manager, and Node.js LTS version. Additionally, it’s great if your computer has a physical memory of 8GB or higher because the Windows build processes typically need above-average physical memory to run.

The above script file recommends having 16GB of physical memory. You can continue with the tutorial if the second execution of the above script gives an output like below.

Install React Native for Windows
Remember to call react-native init from the place you want your project directory to live.

npx react-native init <projectName> --template react-native@^0.68.0

Navigate into this newly created directory
Once your project has been initialized, React Native will have created a new sub directory where all your generated files live.

cd projectName

Install the Windows extension
Lastly, install the React Native for Windows packages.

npx react-native-windows-init --overwrite

The --overwrite flag copies a custom metro.config.js file. If you are starting a new app, this should have no impact. If you are adding Windows to your existing app and you have modified the metro.config.js file, please back up your changes, run the command and copy over to take effect.

Running a React Native Windows App
In your React Native Windows project directory, run:

npx react-native run-windows

Did you see any error? if no you are done!!!

if yes you are lucky!!!

just kidding

FIRST ERROR
After my first round of searching, I found out that I had to run a power shell file, too bad i can't find the file again!!

viola!! caught you again

https://github.com/microsoft/react-native-windows/blob/main/vnext/Scripts/rnw-dependencies.ps1

go to the above link create a file in any directory with rnw-deps.ps1
once done, right click on it, and run it with powershell, it takes just a sec.

SECOND ERROR
the error at line 1 char 1 positional argument, while naming my folder structure I named some folders with "DESKTOP APP" with deep searching you will find out a file "windowstoreapputils.ps1" in node modules doesn't like spaces in paths names or should I say, frustrates my life by breaking my code because of path spaces, i was able to pass through this by removing any special characters (e.g - and _ ) and spaces from my path structure.

Thank you.

THIRD ERROR
My code still broke at the last part, i forgot the error but what i did was to run

npm i

npx react-native-windows-init --overwrite

multiple times then at last after a week, react-native run-windows worked fine.

I am opened to any difficulty in setting up react-native desktop app!

how amazing it is to get this running on your system!

DEV Community: Olabisim

NEW WAVE OF WRITING REACT-NATIVE

SETTING UP A REACT-NATIVE DESKTOP APP IN 5 MINUTES...