This is a fresh React Native app using React Native Paper. I followed the instructions at https://callstack.github.io/react-native-paper/getting-started.html and installed react-native-paper and react-native-vector-icons.
For some reason, none of the icons are showing in the app -- see below:
For example, I have a Searchbar at the top of this screen with the following code. As far as I can see, I don't even have to specify an icon there. It should automatically display a magnifying glass but no icon is showing.
<Searchbar placeholder="New to do item..." />
Any idea why and how to fix it?
Stop your application. Then go to project directory > open cmd > run npx react-native link react-native-vector-icons
cmd will show you linking is successful
Now run your app again
Just follow the installation steps as described here: https://github.com/oblador/react-native-vector-icons#android
React-native-paper uses MaterialCommunityIcons so remember to add it in the iconFontNames list in the steps above.
Related
i am learning react native with expo instalation and using react-native navigation drawer. after some time adding new plugin/packages, create new components, and clean up/remove basic default installation components (i use tab template), it shows something like this in the android emulator: strange overlay sliding from bottom to top when first reload.
do you guys know and experience same thing? what is that and how to remove it? i tried run it on web, it doesnt show
I have created an app using npx react-native init AwesomeProject command and I have used the expo-av npm package with Video in the Background (occupying the entire screen) and some Images which can be clicked using Touchable Opacity. I am trying on iOS.
I migrated this code from expo to just react-native. When I try to load the feed I can not see the Video or any elements on it but when I open the Inspector and select Touchables I am able to see all the elements on the screen.
I am not sure why this behaviour.
Did anyone face similar problem ?
So I'm doing a login page, for that I'm using the TextInput, reading the documentation I found the inlineImageLeft props, that allows me to put an icon on the input. The documentation tells me to position the icon on the /android/app/src/main/res/drawable folder... although expo doesn't have the Android Folder, in the Expo documentation it's said the same thing.
Is there any way to use this without having the android folder?
This is my view and this happens when I open the soft keyboard, I'm running on the latest Expo and React Native, the TextInput is not seen. I don't have standalone Android and iOS folders so I cannot add things to manifest or can I?
Use a KeyboardAvoidingView.
Here's the link to the doc https://reactnative.dev/docs/keyboardavoidingview
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!