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
1
vote
2 answers
React Native Calendar does not apply theme changes
I am trying to use any calendar component from the react-native-calendars library, however I am not being able to match the calendar colors with my given theme.
For exemple, I have the following code:
export default function Statistics({ navigation…
Lavínia Beghini
- 165
- 1
- 11
1
vote
1 answer
How to view a component in onPress of React-Native-Paper Chip component
I want to show a Add button when I click Chip's onPress. The component I want to display is onPressChip() function. This is my code.
const Item = ({title}) => (
onPressChip()} style={{margin: 'auto'}}>
…
Milindi Senevirathne
- 55
- 1
- 7
1
vote
1 answer
React Native Paper Theming Fails to Apply
I'm fairly new to React Native, so apologies if this is a basic question. I'm trying to apply a Dark Theme using React Native Paper, but it won't work for some reason. My code is as follows:
import React from 'react';
import { SafeAreaProvider }…
Bry
- 123
- 6
1
vote
1 answer
How to remove extra space above react navigation header?
There is extra space appearing above the react navigation header, but only when I have built an apk and run it on my phone. When using expo, there is no extra space. I am using a Samsung S21 to test. I am also using React Native…
Zachary Buce
- 140
- 7
1
vote
3 answers
How to align text in TextInput for react-native-paper
I am using "react-native-paper": "^4.12.5" & "react-native": "0.70.4"
I want to transform the layout on the left to the one on the right using react-native-paper. But I have found a problem. I don't know how to center the input, and the placeholder…
Mateo Lara
- 827
- 2
- 12
- 29
1
vote
1 answer
options dialog in React Native Paper
I want to implement the options dialog from React Native Paper:
However, the example code (link to example code) from React Native Paper is different.
There doesn't seem to be functionality in React Native Paper to create the options dialog.
The…
bieboebap
- 320
- 3
- 18
1
vote
0 answers
How to change react native paper bottom navigation color?
I want to change the color of react-native-paper naviagation.
How can i change the color. I am able to change the color of background but not able to change the color of active tab round button.
Image Link = https://i.stack.imgur.com/3Edpm.png
I…
shoaibdevs
- 401
- 6
- 18
1
vote
2 answers
React native paper - BottomNavigation
Does anyone know how can i change that purple color which i marked?
I used react-native-paper latest version.
Thanks!
domJ
- 37
- 1
- 4
1
vote
1 answer
Disabling autocomplete suggestions in React Native
I've looked around quite a bit and can't seem to find an elegant solution to this. I basically need to disable any kind of suggestions that show up above the keyboard in both Android and iOS. So far, the solutions I've tried seem to work the iOS…
Rameez Hussain
- 6,414
- 10
- 56
- 85
1
vote
1 answer
How to use the ref property in a react-native-paper TextInput
I'm trying to use the react-native-paper TextInput as a field to show a location search input. This doesn't seem to work because the ref property on this component doesn't get registered. How can I add a ref property to this field?
chackerian
- 1,301
- 2
- 15
- 29
1
vote
0 answers
Text not centered within Badge component
Text within the Badge component will not center (see attached images). I have tried Badge in react-native-paper and react-navigation bottom tab. Both display properly on some simulator devices however not on a physical iPhone 13 Pro Max I am testing…
Jaminj
- 41
- 3
1
vote
0 answers
react native paper Appbar shows extra row or top offset
Good Morning, folks,
This:
import React from 'react';
import { StyleSheet } from 'react-native';
import { Appbar } from 'react-native-paper';
function StatusBarWLT({page, isOnline, navigate}) {
return (
FloriErn
- 31
- 5
1
vote
0 answers
How to import figma Material dsp.json theme into react native paper
When designing using the Material 3 Design Kit and Material Theme Builder from figma, you can export your custom material design system in the form of a dsp.json. How do I pass the information in this json to the React Native Paper provider's theme…
Ahmad El-Bobou
- 11
- 2
1
vote
4 answers
react native paper : i want to change button's color when i press react native paper's button
While my react-native-paper button is pressed, the background color turns violet.
I want to change this 'violet color' to anything to suit the situation.
I change button's text color easily and rejoicingly with docs.
However, I read the docs of…
nayounsang
- 83
- 1
- 6
1
vote
0 answers
Cannot switch back to bottom navigation from react-native-paper-tabs
Problem: I have build a structure using react-native-paper bottom navigation. One of the bottom tabs is ''Info" which is implemented using react-native-paper-tabs.
It works fine when I get into it, but gives error when I switch back to my bottom tab…
Shrikant Jha
- 73
- 11