Questions tagged [react-native-elements]
React Native Elements is a Cross-Platform UI Toolkit for React Native. The focus of React Native is to provide consistent design across Android, iOS and Web! Very customizable and 100% open source.
278
questions
0
votes
0
answers
27
views
Auto generating storybook stories for expo and react-native-elements v4
I've recently been involved in two different projects, each with its own unique documentation setup. In one project, I was working on a Next.js application where we used Storybook as our documentation ...
0
votes
1
answer
33
views
Expo: Failed to set an indexed property on 'CSSStyleDeclaration': Indexed property setter is not supported
when I click on ADDONS button on story page, I get the following error:
Failed to set an indexed property on 'CSSStyleDeclaration': Indexed property setter is not supported
This is my story:
import ...
0
votes
1
answer
45
views
How to make react native rounded button background to transparent or remove white from the background?
I use react native elements button to create the buttons. The button style is applied from theme. Button style is
Button: (props,theme)=>({
loading: false,
raised: true,
...
0
votes
1
answer
77
views
react native elements input border bottom issue, with radius
How can I change the bottom border of an Input with RNElements, so that it matches the other sides?
styling:
inputStyle: {
borderWidth: 0,
borderLeftWidth: 1,
borderRightWidth:...
0
votes
1
answer
93
views
React Native Overlay child component's onPress event for navigating to a different page does NOT work
I am displaying Home component in my overlay and it has a set of links which onPress navigate to different pages, the Home component itself works fine however it doesn't trigger navigation within the ...
0
votes
1
answer
45
views
why this code show error ( Invariant Violation: Cannot specify both value and children)?
why this code show error ( Invariant Violation: Cannot specify both value and children) ?
why, when I run this code showing me (the error Invariant Violation: Cannot specify both value and children)...
0
votes
0
answers
243
views
React Native Elements theme is not working
I am creating a react native app. For my component ui library i choosed react-native-elements.
Now i want to apply my own theme to it, however it is not working 100%. When i want to override the ...
0
votes
0
answers
68
views
Issue with Displaying Correct Icons in React Native using @expo/vector-icons, react-native-vector-icons and native base
I'm facing a problem with displaying the correct icons in my React Native application. I have previously used the @expo/vector-icons package, and the icons were displayed correctly. However, in my new ...
0
votes
1
answer
287
views
Icon not showing in React.js
Icons not showing in React Native JS.
I check all of the codes but I can't find any problem.
When I run it in Android, the Icon not showing
Please help me to find the problems so the Icon can showing ...
0
votes
1
answer
288
views
How to change Track Color in a Slider
I was using Slider component from the library 'react-native-elements'. Below is the code for your reference:
<Slider
style={{ width: '70%', marginTop: -12 }}
...
1
vote
0
answers
361
views
Keep focus on textInput when interacting with other elements in React Native
I'm trying to create a text input using React Native and React Native Elements with an autocomplete list.
The desired behaviour is - on focusing the text input, the autocomplete list opens. The user ...
0
votes
0
answers
102
views
How to speed up React Native screen when full of TextInput?
I have a screen with more or less 12 TextInput. As I open the screen with multiple TextInput, the app starts to lag and FPS seems to drop.
I am using React Native Paper UI library and found out that ...
0
votes
0
answers
140
views
How to use react-native-elements Card.FeaturedTitle
I'm trying to create a card with an image and text/title overlay. I thought that Card.FeaturedTitle from React Native Elements (v2.3.2) would be just the right thing, except I can't get it to work.
...
0
votes
0
answers
124
views
React Native Elements and React Navigation: SearchBar won't stay in focus
I'm developing a simple Recipe application, using React Navigation for routing and React Native Elements for the UI. In the "Search" screen, I use RNE's SearchBar component. I fetch new ...
2
votes
0
answers
90
views
Typescript error for Icon from react-native-elements
I am getting a typescript error when I try to use icons from react-native-elements.
This is the error.
Property 'tvParallaxProperties' is missing in type '{ type: string; name: string; color: string; ...
0
votes
1
answer
82
views
How to attach accessiblityLabel to CheckBox from react-native-elements
I'm trying to prepare my React native code for testing with Appium 2.
We use CheckBox from react-native-elements.
I tried to add accessibilityLabel like this
import {CheckBox} from 'react-native-...
2
votes
2
answers
121
views
Can't render Card from react-native-elements
I have been simply trying to render a card from react-native-elements UI library. Here is the documentation that I've been looking through and literally copied and pasted from: https://...
1
vote
0
answers
58
views
React native elements theme provider not working in testflight, but works in production mode in expo
I have a few themes throughout my app that I use for buttons, and in development and production mode on expo, all of the buttons look fine. However, when installing the app as a tester from Testflight,...
2
votes
1
answer
464
views
react-native-elements + Next.js gives “Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type.”
I have a combined Expo/React Native + Next.js project (native + web app), based on Expo’s instructions (see guide, @expo/next-adapter, code example).
Source code: https://github.com/tomsoderlund/...
2
votes
1
answer
312
views
How to apply disabled style for Input not only to the input itself but to container?
I'm using Input from react-native-elements and when I add the disabledInputstyle it only changes the input (well, just like the name suggests). I know I can do it myself by using useState and defining ...
0
votes
1
answer
421
views
Change the drag of ListItem.Swipeable from React Native Elements
I've been using the Swipeable component from react-native-gesture-handler to handle my swipeable list items, but Swipeable is causing lag on the JS thread during the initial render, according to my ...
0
votes
1
answer
344
views
Put Avatar and icon on Top of page without React native Element Headers
I am trying to do something like this.
i am using React native Elements, and when i add the components it brings something like a very blue header, hence disrupts other screens and i would not want ...
2
votes
1
answer
733
views
React native elements with jest not working
I'm using @testing-library/react-native but when I try to test a component that has any rneui: 4.0.0-rc-6 components I get several errors:
The first now was
Details:
/Users/ep/myProject/...
1
vote
0
answers
100
views
How to fill in the value of the ListItem. Chevron Component attribute?
<ListItem.Chevron Component={() => {
return (
<Iconfont
name={"ic_in_24"}
size={24}
color={"#48D597"}
onPress={() => navigation.navigate(...
0
votes
2
answers
1k
views
React native 0.69.5, react-native-elements, Icon component showing just X
Tried both ways to show Icon:
with import { Icon } from 'react-native-elements'
with import Icon from 'react-native-vector-icons/FontAwesome'
Dependencies
import { Icon } from 'react-native-...
0
votes
2
answers
951
views
How do you use icons in a React Native Elements Header object?
I went through all the set up steps at https://reactnativeelements.com/docs and am just trying to do a simple Header following their example.
If I click the "Copy Code" button in their ...
0
votes
1
answer
1k
views
react native element listItem.accordion
//I am rendering an API response with the help of FLatlist but when I press the expand option it will open all the accordions.................
import { View, Text, StyleSheet, FlatList } from 'react-...
1
vote
1
answer
243
views
KeyboardAvoidingView has no effect
I am trying to use keyboard avoiding view for not hiding my input element. I have tried multiple ways but its not working for me and elements still get hidden for some reason!
Can anyone help me ...
1
vote
1
answer
876
views
Custom theme is not applied to the react-native-elements components
I've created a custom theme and passed it to ThemeProvider, but it hasn't been applied to react-native-elements components. I'm using react-native-elements version 4.0.0-rc. Here is my code:
Custom ...
5
votes
1
answer
1k
views
Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ThemeProvider>
ThemeProvider from react-native-elements in not allowing childrens.
Here is the code :
const Root = () => {
const {theme, isNewUser} = Settings.useContainer();
const darkMode = useMemo(() => ...
0
votes
1
answer
2k
views
React-Native-Elements Tooltip non functional
I'm trying to add a tooltip component to my react native project, I installed React Native Elements to do this. I know it's installed correctly because the Divider component worked perfectly fine. For ...
0
votes
1
answer
417
views
Why does the react-native-elements form show me a line below the Input?
I am trying to create a simple registration form with react-native-elements.
But it is showing me elements that I have not created, a blue line under each Input.
Where does this line come from?
Can ...
0
votes
1
answer
937
views
Ternary Operators and Text Input
I am creating an app that is text to sound translator. And I am using input text from react-native-elements, as well as ternary operators. How do I check if the text input box is empty or has any ...
1
vote
1
answer
407
views
Not all icons are shown in react-native
I added react-native-elemets and react-native-vector-icons. I am looking for the icons name in the official website and by selecting only free icons, and importing icons as following
import {Icon } ...
0
votes
1
answer
492
views
Why does the Input of 'react-native-elements' go out of the Modal Window?
I am working with a form to change the user's name, email and password.
All elements are from 'react-native-elements', Button, Icon and the Input.
This is displayed in a Modal created with Overlay of '...
3
votes
1
answer
434
views
Expo/ReactNativeElements/Storybook, extending theme issues
I am working on finding a way to create a ReactNativeElements UI library for our team, with Expo as our development environment (we use Expo on existing deployed apps), and using Storybook to create ...
1
vote
1
answer
2k
views
How to change background color (safeareaview) with React Native Elements theme property?
I have started using React Native Elements (https://reactnativeelements.com) for a new project.
I am trying to update the light and dark theme colours (https://reactnativeelements.com/docs/...
0
votes
1
answer
144
views
How to pass backgroundColor as props in inputContainerStyle in Input component react native elements
const AppInput = (_props: InputProps) => {
return(
<Input
labelStyle={styles.labelStyle}
...
0
votes
2
answers
284
views
onPress event not called on react-native element
I am using react-native-elements to add an Avatar and want to perform an action when the Avatar is pressed.
import { Avatar } from 'react-native-elements';
<Avatar
size={50}
...
1
vote
1
answer
378
views
render error, element type was invalid: expected a string (for built-in components)
render error, element type was invalid: expected a string (for built-in components) or a class/function (for composite components) but got :undefined. you likely forget to export your component.
...
1
vote
0
answers
509
views
React navigation and react native elements header types are incompatible?
I have been banging my head against this for hours and can't resolve it or make sense of the actual issue.
I have a Home screen where I'm trying to set the headerLeft and headerRight elements
...
1
vote
1
answer
3k
views
React native - Using useRef with Input element from react-native-elements library
I'm building an app on react native and I'm trying to set a ref on an input element from the "react-native-elements" library.
I'm getting the following error:
Type 'HTMLInputElement | null' ...
3
votes
1
answer
416
views
Using React Native Elements, how can I globally style the text color of a <ListItem.Title> component?
I'm using the react-native-elements ui framework with ThemeProvider and trying to globally style the text of a component like this...
<ListItem bottomDivider>
<ListItem.Title>Name</...
0
votes
1
answer
537
views
How to extend Text component in react native elements
I'm trying to extend default theme, extending colors works like a charm, but if I try to extend Text component with more text styles, this doesnt work, I don't understand what I'm doing wrongm. This ...
0
votes
1
answer
73
views
Unable to resolve module ./list/ListItem from E:\socal project\social-app\node_modules\react-native-elements\dist\index.js:
I'm facing the error while using the react-native-elements (search bar)
1
vote
1
answer
1k
views
What do I need tvParallaxProperties for? (react-native-elements Icon)
I wanted to use icons in my react-native app, so I installed react-native-elements. The Icons itself work but I have to add a property called tvParallaxProperties on the Icon element like that:
<...
0
votes
1
answer
399
views
react-native-elements fontFamily issue
After installing react-native-elements and its dependencies, I'm unable to get the SearchBar component to render as it should
import React, { useState } from 'react';
import { View, StyleSheet } from '...
3
votes
3
answers
2k
views
Using JEST with react-native-elements - mockModal is not a function
Is it possible to use jest in react-native projects, which use components from react-native-elements?
The example jest file https://github.com/vanGalilea/react-native-testing/blob/master/tests/Login....
0
votes
1
answer
545
views
How to use useEffect to change boolean values
I have 2 user text inputs called Search Location and Coordinates. I'm trying to use a checkbox when selected allows search location to be edited and the coordinates input be disabled and vice versa ...
0
votes
0
answers
121
views
react-native-elements Button is not a perfect rectangle
I have a button in my app that needs to be a perfect rectangle, but with no styling attached to it, there's a tiny default border-radius to it. How can I resolve this?
<Button
title="...