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.

Filter by
Sorted by
Tagged with
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 ...
Mohammad Reza's user avatar
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 ...
Mohammad Reza's user avatar
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, ...
Deva Samy's user avatar
  • 121
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:...
Phil Lucks's user avatar
  • 3,056
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 ...
javapedia.net's user avatar
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)...
Mohamad Karimi's user avatar
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 ...
Splix's user avatar
  • 1
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 ...
Laiba Javaid's user avatar
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 ...
Chessy's user avatar
  • 1
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 }} ...
Satyam's user avatar
  • 75
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 ...
Jay Gordon's user avatar
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 ...
serking's user avatar
  • 117
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. ...
Sjors Hijgenaar's user avatar
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 ...
christian_js's user avatar
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; ...
gnanasai Dachiraju's user avatar
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-...
Babu's user avatar
  • 4,554
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://...
hotgatorade's user avatar
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,...
midnighttfoxx's user avatar
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/...
Tom Söderlund's user avatar
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 ...
user avatar
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 ...
Tim van Dam's user avatar
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 ...
Mike's user avatar
  • 207
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/...
Eduardo Palacio's user avatar
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(...
poplink's user avatar
  • 11
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-...
Jakkins's user avatar
  • 113
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 ...
Reagankm's user avatar
  • 4,960
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-...
vivek chaudhary's user avatar
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 ...
Shreyas Jadhav's user avatar
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 ...
Lee Nguyen's user avatar
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(() => ...
Aman Jat's user avatar
  • 287
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 ...
MLShax's user avatar
  • 13
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 ...
Mari Cruz Fernandez's user avatar
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 ...
Sarah Nowakowski's user avatar
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 } ...
user567's user avatar
  • 3,772
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 '...
Miguel Espeso's user avatar
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 ...
Phil Lucks's user avatar
  • 3,056
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/...
logicman's user avatar
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} ...
Govind Maheshwari's user avatar
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} ...
kec334's user avatar
  • 21
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. ...
Rian Halabi's user avatar
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 ...
Jordan's user avatar
  • 2,411
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' ...
German Cocca's user avatar
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</...
dmathisen's user avatar
  • 2,291
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 ...
Cristian Flórez's user avatar
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)
Vinod kumar D V's user avatar
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: <...
JaRoMaster's user avatar
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 '...
Ricardo Sanchez's user avatar
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....
Bilal Abdeen's user avatar
  • 1,737
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 ...
user avatar
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="...
Nathan Getachew's user avatar

1
2 3 4 5 6