In my current react native app.
I am using react-native-navigation for general app navigation.
On the other hand, I would like to use native-base for some basic UI elements.
My question is, how do I pass a <Icon name="ios-search"/> from native-base to a react-native-navigation tab?
Based on this wiki. It seems that they only accept an actual image for a tab icon?
https://github.com/wix/react-native-navigation/wiki/Top-Level-API
As far as i see it, native-base icons is just a wrapper on react-native-vector-icon. In react-native-vector-icon, there is a getImageResource function that allows me to convert icons into images. How do I do it in native-base?
getImageSource function will be added to the Icon in next version of Native Base.
For now, you can import any Icon family directly from react-native-vector-icons and use getImageSource from there.
import Ionicons from 'react-native-vector-icons/Ionicons';
...
...
getImageSource('ios-home', 20, 'red').then((source) => this.setState({ userIcon: source }));
Related
using react-navigation v6 and can't figure out how to make the header work as iOS on android.
On android the header seems like it rendered on top of component screen. I'm using 'pan' as softwareKeyboardLayoutMode with expo.
app.config.ts
android: {
...
softwareKeyboardLayoutMode: 'pan',
},
I found the root cause <Animated.View entering={FadeIn}> that seems to mess up how react-navigation does layout
https://github.com/software-mansion/react-native-reanimated/issues/3368
Rewrote all the animations to use Animated from react-native
I am using expo's snack, no icon ever showing correctly, what am I doing wrong?
I test this snack https://callstack.github.io/react-native-paper/button.html, and many other snack, but it always show rectangle icon.
I am using expo 36.0.0
The issue is visible in expo log as
Tried to use the icon 'stepforward' in a component from 'react-native-paper', but 'react-native-vector-icons' could not be loaded.
To remove this warning, try installing 'react-native-vector-icons' or use another method to specify icon: https://callstack.github.io/react-native-paper/icons.html.
Even if you try to add package it's still not resolved by this, some issue in expo as reported here Expo forums
Following is the workaround as Snack link
Using Expo vector Icon
import { Ionicons } from '#expo/vector-icons';
2.Get type
import SimpleIcon from 'react-native-vector-icons/SimpleLineIcons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
then pass as child
Having to work with an application that someone else developed and not available anymore. Pretty new to React-Native and Expo. Keep on getting this error:
fontFamily 'FontAwesome' is not a system font and has not been loaded through Expo.Font.loadAsync.
- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
- If this is a custom font, be sure to load it with Expo.Font.loadAsync.
I googled this and got some other links about what people were encountering and how they solved it e.g.
import {Font} from 'expo' and async load it in via componentDidMount
import {FontAwesome} from '#expo/vector-icons' package
tried deleting where it was used and refreshing app
Here is an example of an Icon a previous developer returned:
<Icon name="sign-in" color={'#FFFFFF'} type="font-awesome" />;
which is being imported like this from react-native-elements:
import { Icon, Button } from 'react-native-elements'
All of these ways I tried didn't work. Tried reading up on Custom Font loading but it looks like everything is being done right to me in the repo. Any help appreciated!
I would use react-native-vector-icons to load in font-awesome.
Make sure and run rnpm link after you yarn or npm install the module.
Using
import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = (<Icon name="rocket" size={30} color="#900" />)
I’d like to add an accessibilityIdentifier to a React Native component, so that I can use Xcode’s UI testing to navigate around my app.
Is there a way to specify the accessibilityIdentifier (not the accessibilityLabel) for React Native?
You can add an accessibilityIdentifier on React Native components (View, Text, Image...) using the testID property. This gets added to the component as a accessibilityIdentifier on iOS.
Note that it doesn't work on custom components.
Here's an example:
<TextInput
placeholderTextColor="#dddddd"
style={[styles.main, styles.textColor]}
placeholder="Add a new todo item"
onChangeText={this.handleInputChanges}
value={inputValue}
testID="addToDoItem"
/>
I want to know how I can make a keyboard aware scrollview without using the popular library, because that is currently giving me a bug when using "controlled" TextInputs within the KeyboardAwareScrollView
Has anyone managed to pull this off? Perhaps with the KeyboardAvoidingView?
The solution has to work on both iOS and Android
You can make use of KeyboardAvoidingView component. Import it from the 'react-native' along with all other components you need and keep your UI within that component.
for example,
import {KeyboardAvoidingView} from 'react-native'
export default class App extends React.Component{
render(){
return(
<KeyboardAvoidingView behavior="padding">
Your UI
</KeyboardAvoidingView>
);
}
}
Don't forget to add the prop behaviour="padding". It worked for me on android device. I don't have an iPhone to test it, but hope it would work.
Take a loot at this this link for further information. Hope this helped.