FAQs.md

FAQs

#### I am facing issues while setting up.

Solution:

Please verify the system requirements mentioned in installation procedure.

---

I am getting a watchman error when I run npm install.

Solution:

• Update watchman to the latest version.
• Run npm install again.

---

Unrecognized font family ionicons

When I run it in Xcode I'm getting a "Build Failed" error, with message:

• ld: library not found for -lRNVectorIcons
• clang: error: linker command failed with exit code 1 (use -v to see invocation)

Solution:
Linking the Vector Icons repo in Xcode will solve the issue.
More information about how to link libraries to your app. Click here
If you still face the same issue, then restart packager and run from xcode.

---

react-native-vector-icons peer installation failed

The react-native-vector-icons is always not installed.
I follow up the installation instruction by using rnpm link.
But this doesn't seem to link the package correctly.

Probabilities:

1. This might be the problem if your rootProject name is not correct at all places.
2. rnpm link might not work all the time.
• In case of android
• If React Native version in your app >= 0.29

<div style="padding-bottom: 20px;">
    <b>Solution 1:</b> <br />
    Check your rootProject name in react-native-vector-icons's <b><i>font.gradle</i></b>, in case if its hard coded there. This causes failure in linking because the rootProject name may not be same with the definition in <b><i>settings.gradle</i></b>.
</div>
<b>Solution 2:</b>
Please complete the installation procedure for <b>react-native-vector-icons</b> by taking up the
manual setup mentioned in the docs.

---

How to override style in NativeBase?

I didn't find a way to override style.
How can I include React StyleSheet into my app?

Solution:
NativeBase is built on top of React Native.
Hence with any component you can pass the style property which will be merged to the default style of that component.

    Example:
    <pre><code class="language-jsx">&lt;Button style=&#123;{backgroundColor: '#FF0000'}}>
    Click me!&lt;/Button></code></pre>
</div>

---

How do I add events with the components?

What events are available for the components?
Example buttons, list items etc.

Solution:
The NativeBase components are built on top of React Native components. Hence the callback events of React Native holds good with NativeBase components.

    <i>Example:</i> The <code>Button</code> component is actually a wrapper of the <code>TouchableOpacity</code> component of React Native. So you can just use the <code>onPress</code> callback function for event handling.<br /><br />

    Refer the cheatsheet
    for more details.
</div>

---

None of the above, I have a different error

The above listed FAQs were not of your help?
Facing some other issues?

Solution:
We welcome all your issues. Feel free to raise issues on GitHub.
Please go through the gitflow to report issues.

---

How to customize components of NativeBase?

I didn't find a way to customize the default styles of NativeBase components.

Solution:
NativeBase provides a separate file inclusive of color schemes for all components.
Go through customize section of docs.

---

I want list of icons with their names used in NativeBase

Docs says Choose from 700+ Icons
I want the complete list of icons containing the name and image of the icons that are ready to use.

Solution:
NativeBase use Icons from React Native Vector Icons.
Hence the collection of icons from Vector Icons holds good with that in NativeBase.

---

FlatList inside Content item invokes onEndReached infinite times

I was facing the issue that onEndReached was getting called again and again after an interval when setting onEndReachedThreshold greater than 0.

Solution:
Use prop contentContainerStyle of Content component as in
{% raw %}contentContainerStyle={{flex: 1}}{% endraw %}

---

I want to style Tabs, change text color of individual Tab

I want to change width of Tabs, and change TextColor of individual Tab.

Solution:
Use tabsContainerStyle to style Tabs component,
Use textStyle and activeTextStyle to change text color of individual Tab component, and tabStyle to style individual Tab component.

---

Content of Left Component not being rendered at the left of the screen

I am not sure why the content of Left appears at somewhere middle of the screen. It should appear at left side.

Solution:
If you use Left or Body or Right with any NativeBase component, you must include these 3, to align the components.

---

I want to get the reference of native-base floatinglabel Input

How can I get the reference of native-base floatinglabel Input?

Solution:
When using floatingLabel, use getRef to get the reference of Input component. Always wrap floatingLabel component with Form.

---