Using Import syntax in React native Image - react-native

Can I use import syntax instead of require as suggested by react native docs
I assume both are same. If not why? Will that improve the performance of loading images?

Yes, the latest React Native tutorials use the new import syntax.
The main difference is, import is ECMAScript 6(ES6) syntax and require is ECMAScript 5(ES5).

yes you can use import. require is old syntax and import is new one introduced in ES6.

Related

Using SASS in React Native

I'm trying to find a way to implement SASS in my react native project. All I found is this package react-native-sass-transformer, but it doesn't seem to work on my end. Tried looking for other way but all I see is approach in React instead. Does anyone know another way into implementing SASS in a react native cli project? Thank you!
I bet you're trying to use react native sass transformer with .tsx (typescript implementation), if it's the case, you just need to :
//#ts-ignore
import styles from './app.scss';
And then it should work.
You can also use: https://github.com/kristerkari/react-native-typed-sass-transformer to handle types (I didn't tried yet, but I'll !)
Good luck!

Not able to import #/screens/AreaChartScreen/chartAdds in react-native

I want to add Dots in my react native Line Chart component.
I have installed react-native-svg and react-native-svg-charts.
I need to import Dots, Line, Gradient from '#/screens/AreaChartScreen/chartAdds' but the import statement does not work.
Probably are your babel and jsonconfig configurations that are wrong; the configuration is more tricky than with next/react.
I saw this video and may help you.
https://youtu.be/03F0xzI9VnU :)

Redux persist imports not importing

Im following the documentation on the redux-persist github page but i dont know if they are for react native or not because im having issues with my imports. I am using Expo.
Heres what the documentation said you should use vs what i actually had to use:
import storage from 'redux-persist/lib/storage'
vs mine:
import storage from 'redux-persist/lib/defaults/asyncLocalStorage'
The next one i need to import is this
import { PersistGate } from 'redux-persist/integration/react'
However i cant figure out what file this is from at there is no 'integrations' folder.
Does anyone have any solution to this?
What makes you think that is not there? It is clearly part of the package as you can see here: https://unpkg.com/browse/redux-persist#6.0.0/integration/react/
Same for storage:
https://unpkg.com/browse/redux-persist#6.0.0/lib/storage/

Why does styled-components 5.x warn about "Expected style to contain units."

When styling a React Native app with Styled Components 5.x I'm getting the warning...
Expected style "borderWidth: 2" to contain units.
This didn't happen with previous versions.
What does the warning mean?
After some research and questions on github I tracked this one down...
Styled Components uses the package css-to-react-native for it's React Native conversions.
css-to-react-native recently released version 3 which now requires units to be present for all measurements. Details here.
You should use px for React Native as it is density independent.
I think that using px is a bit of a pain, unintuitive, misleading, and even dangerous if you are using a theme giving some ...px string value to a component (Ionicons size for instance) that expect react native number units.
My way of dealing with this:
import { LogBox } from 'react-native'
LogBox.ignoreLogs([`to contain units`])

ToastAndroid showWithGravity Error

Following the document, I am including a toast in my projects:
import {ToastAndroid} from react-native
ToastAndroid.showWithGravity('A toast with gravity',ToastAndroid.SHORT,ToastAndroid.TOP);
But I got an error:
However, if I replace it with another function, it works:
ToastAndroid.show('A toast without gravity',ToastAndroid.SHORT);
I am using React Native 0.30.0
Is it a bug or I made the wrong way to use it.
ToastAndroid.showWithGravity(...) was implemented in ReactNative 0.31.0, upgrade your RN version.
First implemented here: v0.31.0-stable branch.