Paper is a collection of customizable and production-ready components for React Native, following Google’s Material Design guidelines.
Material design for React Native.
Questions tagged [react-native-paper]
345 questions
0
votes
1 answer
React Native @gorhom/bottom-sheet collapses/opens when keyboard dismiss or input blur
I have a basic app that uses these packages:
"@gorhom/bottom-sheet": "^4",
"@hookform/resolvers": "^3.0.0",
"@react-navigation/drawer": "^6.6.2",
"@react-navigation/native": "^6.1.6",
"@react-navigation/stack": "^6.3.16",
"react-hook-form":…
Julius Guevarra
- 690
- 1
- 7
- 19
0
votes
1 answer
Show/hide List.accordion with button with react-native?
I have a react-native app. And I try to toggle a List.Accorion. I have some cards. And on every card there is a icon. And if a user triggers the icon then the List.Accorion has to be shown or hidden. But the current situation is that if a user…
mightycode Newton
- 3,229
- 3
- 28
- 54
0
votes
1 answer
How to change title of custom header in React Navigation and React Native Paper?
I followed the tutorial on this link https://callstack.github.io/react-native-paper/docs/guides/react-navigation/#adding-appbar for your reference.
I have a custom header AppHeader from React Native Paper. Below is the code:
import { Appbar } from…
serking
- 111
- 8
0
votes
0 answers
How to hide/show keyboard in react native?
I want to show/hide the keyboard only by clicking the Keyboard icon and keeping the keyboard always closed when tap on the text input field.
const [inputs, setInputs] = useState({'input1':'', 'input2':"", 'input3': "", 'input4':""})
const…
Nouman Javaid
- 1
- 3
0
votes
0 answers
React native paper layout component as Box, Vstack, Hstack component in native base for grouping?
I am creating react native expo app for Android, Ios and web. I have tried with native base ui components and it is easy to use. Best part was layouts like Vstack, HStack, Box.
But I want to use React Native paper, but it does not have any Flex…
spjgoku
- 71
- 1
- 6
0
votes
1 answer
What does IconSource mean in react-native-paper?
So, I was looking at react-native-paper v5 documentation , and icon has property IconSource for icon in SegmentedButtons? What does it mean? Is it a simple
or does it mean something else?
chris aimsworth
- 15
- 4
0
votes
1 answer
How to change background color in TextInputs with icons?
I have a react-native-paper TextInput with a right icon that I want to change background color, but the background behind the icon doesn't change.
It seems like there is a layer behind the TextInput so when changing the TextInput Background and this…
Yolanda Rib
- 1
- 1
0
votes
1 answer
Can we use React Native paper components with Native base?
I am creating expo application for Web, Ios and Android uisng native base as UI component library.
I have Floating label in my design but native base v3 has no floating label input.
Can I use React native paper components inside my app.
Is it a good…
spjgoku
- 71
- 1
- 6
0
votes
0 answers
"Error: Objects are not valid as a React child" when mapping string array to React elements
I am trying to map an array of strings to React Elements (react-native-paper Chips). Whenever I try to use the value in this React Element I get the following error.
ERROR
Error: Objects are not valid as a React child (found: object with…
Beanos
- 1
0
votes
1 answer
How to run a function on the pressed List.item only without it running on all the other List.item in the array. (React Native, Expo)
So I am rendering a list of List.Accordion like this. Each Accordion represents a person and each list.item is a button that gives the user the option to perform an action(function).
danie1r
- 1
0
votes
0 answers
TypeError: undefined is not an object (evaluating 'navigationTheme.colors')
I am trying to use react-native-paper api to implement theme change, when I add this lines of code:
const { LightTheme, DarkTheme } = adaptNavigationTheme({
light: NavigationDefaultTheme,
dark: NavigationDarkTheme,
});
App crashes and…
Vahid
- 97
- 1
- 7
0
votes
0 answers
How to make full-screen Modal inside Material Top Tabs Navigator
I trying to make a full-screen modal (react-native-paper) inside Material Top Tabs Navigator (react-navigation). However, the modal's gray-ish background not covering topbar and header. May I know if it is possible to achieve that?
Wei Loon Wong
- 450
- 1
- 7
- 23
0
votes
2 answers
Flatlist Item in search results needs to be tapped twice for onPress to register
I have a react native modal with a search bar and a flatlist that shows results. The search result in the flatlist has to be tapped twice for the click to register. I need to figure out how to make it work on first click. Here is the code
const Item…
Nika Bo
- 63
- 1
- 11
0
votes
3 answers
Navigation to another stack bottomNavigation react-native-paper
don't know how to navigate to another stack using react-native-paper and react-navigation
function RootStack(): JSX.Element {
return (
fabio87
- 65
- 6
0
votes
0 answers
React Native Paper - Redux ToolKit : Redux doesn't track change in fonts between different themes
I am building an application using React Native and Expo.
I'm using Redux ToolKit to store the state of different themes in React Native Paper. In this example, I switch between two themes (one light and one dark) with a simple switch. I can change…
Art_Arnaud
- 41
- 5