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
Is there a way to get typed theme from useTheme() hook in react-native-paper
Right now I'm following the theming react-native-paper guide for custom theming. But when trying to consume the theme via the useTheme hook, it looks like that the response I've got as a theme object is not properly/fully typed and respectively I'm…
z_lander
- 104
- 1
- 8
0
votes
1 answer
React Native ScrollView component onScroll prop function is delayed
I am using react-native-paper library to add a floating action button (FAB) which changes its width based on the scroll direction of the user.
What it's supposed to do -
If the user is scrolling upward expand the FAB instantly and contract on…
Yeshwanth B
- 85
- 10
0
votes
0 answers
React Native Paper: Text Input, Check the render method of 'TextInputOutlined'
I was trying to create a text input for React Native that displays currency. For the Text Input, I have been using React Native Paper (RNP) and was pointed towards the RNP's Text Input Render method.
Rie Kumar
- 1
- 2
0
votes
1 answer
react-native-paper Change FAB.Group Label fontFamily
Is there a way to change the fontFamily property for the label in a FAB.Group item?
The docs state to use the labelStyle property for label styling, but that hasn't worked.
Pyper
- 75
- 1
- 7
0
votes
1 answer
Add linear gradient color to switch component
How can I add linear gradient color to a Switch in react-native?I can use Switch from either react-native or react-native-paper but I'm open to other dependencies as well.This is what I'm expecting:
Razvan Nuna
- 25
- 1
- 2
0
votes
2 answers
Passing Props to React Native BottomNavigation Scenes
I have User a Profile management page with bottom navigation. Something like the original example:
import React from 'react';
import { BottomNavigation } from 'react-native-paper';
// Components
import CodeScanner from…
checklist
- 12,340
- 15
- 58
- 102
0
votes
1 answer
Add Custom Color in Theme React Native Paper
I would like to add some custom colors in my theme, I'm new in React Native but I don't find something related about how to do it.
import { DefaultTheme } from 'react-native-paper';
const LightTheme: ReactNativePaper.Theme = {
...DefaultTheme,
…
Marlaurita
- 583
- 3
- 11
- 26
0
votes
2 answers
React native paper display custom views when List accordian is expanded
Unable to display custom view as list item in react native paper List accordian . I could only figure out that it can be used for text but not for custom components or custom views. Can anyone let me know if this can be done using react native paper…
HighSha
- 23
- 5
0
votes
2 answers
React Native Paper text input: Why is my textInput so tall?
Im trying to add a textinput to my react native app using react-native-paper, but it keeps rendering as a very tall box instead of horizontal. What am I doing wrong?
screenshot of rendered textbox
import { StyleSheet, Text, View } from…
Brandon McHugh
- 3
- 2
0
votes
1 answer
How can I render a 2-column title in the header of the Accordion component from React Native Paper?
I want to render a 2-column title in the header of the Accordion component from React Native Paper.
The design requires a controlled group of several accordions with each accordion's title property to be in the following format: displaying 2…
JG.
- 11
- 1
- 2
0
votes
1 answer
Unable to close a accordion menu in react native after picking an item from it
So I have a screen in react-native in my android app for reporting faulty equipment on my university and I have a wierd issue with my accordion menu. I use it as a list of options for the type of broken equipment that I store and then send to the…
BananZabijak
- 1
- 1
0
votes
0 answers
Add styles to icon of react-native-paper button element
I use button in react-native-paper with icon. I need to add a shadow style only to the icon of the button. The only available option I found was to add an elevation to the button. But it is applied to the whole button instead of applying only to the…
Jane Lestra
- 1
- 1
0
votes
1 answer
I've implemented a custom dialog using react native paper's dialog component but my screen readers reads the content behind the dialog
I am wondering is there any way to prevent the screen reading from accessing elements that are not in the CustomDialog components while the CustomDialog is visible? I assumed react-native-paper's dialog component would take care of that but it seems…
Onyx
- 5,186
- 8
- 39
- 86
0
votes
0 answers
How to apply background gradient in FAB component of paper?
It is possible to apply a gradient background in the FAB component of the paper with https://github.com/react-native-linear-gradient/react-native-linear-gradient?
Or is there another way to apply a gradient background in the fab, or does it only…
Bernardo
- 1
- 1
0
votes
1 answer
How to make react native paper theme snackbar sticky in scroll view at bottom of screen?
I want a sticky snack bar from the react-native paper theme. Currently with scroll up the snack bar goes upside as well. Instead, I want to make it fixed at a position in scroll view.
Gaurav Khatri
- 387
- 3
- 11