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
4
votes
1 answer
How do I show components below textinput when keyboard is open in react native?
I want the tags below the interests textbox to display while the keyboard is open. The chip components are the tags input from the react native paper library. I've tried using scrollview, keyboardavoidingview, and keyboardawarescrollview to get the…
Wes
- 1,847
- 1
- 16
- 30
3
votes
3 answers
Facing issue in TextInput of react-native-paper ,the label is using line-through effect when I set its background as transparent
Facing issue in TextInput of react-native-paper ,The label is using line-through effect when I set its background as transparent.
How to remove this line-through effect from the label text when the background color is set to transparent,
when color…
Manish Kumar
- 997
- 2
- 13
- 30
3
votes
0 answers
How to align horizontally scrollable data table cell and title to hold max width of the content in react native paper?
This is my first time using react native paper. I am building a data table that should be horizontally scrollable.
Each cell might hold data that would be longer than the header title. I would like the column headers to take the width of the max…
Nata Vacheishvili
- 387
- 1
- 5
- 18
3
votes
2 answers
Hide keyboard and lose focus when user click outside the react-native-paper searchbar input
I use react-native-paper searchbar component to implement a search component. Following is the basic code I developed. But when I click outside the search input field, the keyboard does not collapse and onFocus is not removed from the input.
import…
Gina Romanov
- 31
- 1
- 4
3
votes
2 answers
My React Native Text Input is losing focus after each character is entered
I have a TextBox Component which renders an Input box in my React Native app. It uses react-native-paper:
import * as React from 'react';
import {View} from 'react-native';
import {TextInput} from 'react-native-paper';
const TextBox = () => {
…
Sharon
- 3,471
- 13
- 60
- 93
3
votes
1 answer
Extending react-native-paper Button and Text components in TypeScript
I was trying to make a reusable component using react-native-paper
the problem comes when I try to use extends a type from the package
import React from 'react';
import {Button, Text} from 'react-native-paper';
export type ButtonProps =…
Hamed
- 317
- 1
- 8
3
votes
1 answer
Display React Native Paper Snackbar at the top of the screen
I'm using a SnackBar from React Native Paper that is displayed at the bottom of my app:
But I want to display this snackbar at the top of the screen. I tried to do it using styled components:
export const ConfirmSnack = styled(Snackbar)`
top:…
Ronny Giezen
- 557
- 2
- 10
- 21
3
votes
3 answers
React Native Paper Checkbox Item put label on right after checkbox
I am using react native Expo
From the library react-native-paper/checkbox-item Link
I got the clickable label feature in which by clicking on the text the checkbox gets checked.
I got the tag Checkbox.Itemcode from this Expo Snack…
Sujay U N
- 4,974
- 11
- 52
- 88
3
votes
0 answers
"JSON.stringify cannot serialize cyclic structures" issue in React Native Paper
I'm just a newbie in using the react-native-paper , and i tried to apply an Icon in the right side of my TextInput component but i had a confusing issue : "JSON.stringify cannot serialize cyclic structures"
here is my code :
App.js
import {…
Metidji Sid Ahmed
- 67
- 1
- 6
3
votes
2 answers
Prevent Flatlist to scroll to top on content size changes
Inside a FlatList I have accordions (by react-native-paper). When I scroll to any position and open/close an accordion, The FlatList scrolls to the top of the screen. How should I prevent it?
in another word when an accordion gets expanded, the…
Amir-Mousavi
- 4,273
- 12
- 70
- 123
3
votes
1 answer
Adding a UI element such as a button on fixed position on react native modal
I am having difficulty in placing any UI element with fixed position(float) over a react native modal where modal content exceeds the screen hight. A similar issue happens with flash message/snack bar etc. They are rendered at the top/bottom of the…
int-i
- 661
- 1
- 12
- 28
3
votes
2 answers
style width menu of react-native-paper
I have a menu with a anchor to a button.
I would like to style width of menu such as button.
I have try with style=width:100% but doesn't works. If I change the dimension in pixel, it change.
How I can style with flex mode (for dynamic width).
This…
Francesco
- 135
- 2
- 11
3
votes
1 answer
Combining React-Native-Paper BottomNavigation with StackNavigator
I am currently using React-Native-Paper bottomNavigation. It is working great. However, the next requirement was to add Stack Navigator to individual screens. I have this working on regular bottom-Bar navigation but not able to get it working with…
Vishal Aggarwal IndieGameTalks
- 127
- 1
- 6
3
votes
3 answers
React Native Paper Dark Theme
How do I set the theme to dark theme in React Native Paper? In all my screens, all the 's still have white backgrounds.
const theme = {
...DarkTheme,
colors: {
...DarkTheme.colors,
primary: '#2d3436',
…
Sam
- 26,817
- 58
- 206
- 383
3
votes
1 answer
How do I solve this Error in react-native-paper and Redux?
Error :
Error: Unable to resolve module react-native-paper/lib/typescript/src/core/settings from index.js: react-native-paper/lib/typescript/src/core/settings could not be found within the project.
I am using react-native-paper and Redux together…
akshay2739
- 195
- 2
- 14