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
Related
Hell, I'm trying to create a tab bar in my react native app, but after importing it, it appears it's always undefined. Has this component been deprecated? I still see it listed in the docs. https://facebook.github.io/react-native/docs/tabbarios.html
import React, { Component } from 'react';
import {
TabBarIOS
} from 'react-native';
export default class App extends Component {
render() {
return (
<TabBarIOS/>
);
}
}
I'm using react-native 0.59.3
Looks like this has been removed as part of a core cleanup effort. There doesn't appear to be any native alternative that also behaves correctly on tvos.
https://github.com/facebook/react-native/commit/02697291ff41ddfac5b85d886e9cafa0261c8b98
I've gone ahead and extracted TabBarIOS out into a native module for anyone looking for this.
https://github.com/modavi/NativeIOS
install instructions:
npm install git+https://github.com/modavi/NativeIOS#master
react-native link native-ios
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'm trying to extend the built in react native TextInput component with a method to return the text selection rectangles for a given range. I followed this pattern here but I'm stuck at this step
import React, { Component } from 'react';
import {AppRegistry, StyleSheet, Text, View, NativeModules } from 'react-native';
var TextViewManager = NativeModules.TextViewManager;
TextViewManager is always null. Does anyone know why or how to get access to TextViewManager so I can call the method I've added to it?
I've tried accessing other managers (eg. WebViewManager) in the same way and it's worked a treat. It just seems like TextViewManager is a special case.
Ok I got itworking and it was because I didn't run react-native run-ios after changing my TextViewManager category source in Xcode. I mistakingly thought react-native log-ios built, installed and logged but it only logs.
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 }));
I'm coming from Ionic 2 where I write my code once, and it runs everywhere.
According to this page https://facebook.github.io/react-native/docs/platform-specific-code.html "When building a cross-platform app, you'll want to re-use as much code as possible."
How can I "reuse" code across iOS and Android in ReactNative? In the starter app I see two files: index.ios.js and index.android.js. Is there something like index.js that I can use for sharing across platforms?
It seems like there should be one file for shareable code, since that web page mentioned above also shows how you can use the Platform module to check what OS you are on.
I realize that sometimes you need different behavior on different platforms, but, assuming that my app is simple enough, and my code ends up exactly the same on both platforms, do I have to copy/paste from one to the other? How can I pull same-functionality into it’s own file to be shared on both platforms?
What am I missing?
Thanks!
Here's what you can do. Create a file say main.js that will act as your root page.
main.js
import React, { Component } from 'react';
import { Text } from 'react-native';
export default class Main extends Component {
render() {
return (
<Text>Hello world! from both IOS and Android</Text>
);
}
}
Now on your index.android.js and index.ios.js import that main file and register your Main component as root using AppRegistry.
index.android.js and index.ios.js
import React from 'react';
import {
AppRegistry
} from 'react-native';
import Main from './main';
AppRegistry.registerComponent('DemoApp', () => Main);
if you run react-native run-android and react-native run-ios the Main component will be rendered for both the platforms.
All of the Components with No IOS and Android suffix works for both platforms. Like Navigator works for both ios and android but NavigatorIOS works only for ios. So you'll have to make sure that you're using the cross platform components.
If you need to use platform specific components, then you can use platform detection login to do so:
import { Platform } from 'react-native';
if(Platform.OS === 'ios').....
or
if(Platform.OS === 'android')...