"What do you dislike about React Native Paper?" November 2019 Edition

[Trancever]

We, the React Native Paper core team, would like to get a current list of all the things that people are having problems with when using React Native Paper. This is first time we are running this community feedback gathering initiative, but we are planning to do it cyclically - twice a year. We hope this will help us better understand our users and prioritize the work for the upcoming 2020 year.

Please reply with all the issues that you are having with React Native Paper. Keep your descriptions short and ideally link to other places with more context. Feel free to mention not just technical things but rather any issue that can be ascribed to the React Native Paper project.

If something has been mentioned already, please use the upvote/emoji buttons instead of repeating the same thing so that it's easier to see how many people care about each issue. Please make one comment per topic so that people can upvote just one thing at a time.

Hypothetical Example:

Some of the animations are not native

That would be really nice if js based animations (e.g. Checkbox or RadioButton) were replaced with native ones. Please consider reimplementing animations with reanimated for better performance.

Simple template with header (feel free to copy and paste)

## Header

### Content

[iamclaytonray]

Dropdown/Select Component

Content

I'd love to see a select component from this lib.

[iamclaytonray]

Stabilized Components

Content

I've had a rough time getting Menu components (Menu, MenuItem, etc) to properly work. I will file a bug report in the issue tracker but I've had the following happen:

1. The Menu briefly appears (< 1s) and then disappears.
2. The Menu doesn't seem to exist on top of UI, despite how large my zIndex value is.
3. When it does appear, it doesn't want to play nicely in it's own space. I've had occasions where the Menu appears in a very different position on the screen. Though, I've mainly been developing with iPad so I'm not sure if that has great support yet or not. If it doesn't, supporting multiple sized devices as far as position would be very nice.

[iamclaytonray]

Theming

Content

I'd love better theming options. For example, I'd love to do:

<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>

instead of:

<Button color="#000">Primary</Button>
<Button color="#fff">Secondary</Button>

[RichardLindhout]

Customization

Content

I'd like more customization e.g. 'View' as title

<List.Accordion
      title={titleProps => (
        <View style={{ flexDirection: "row" }}>
          <Text style={titleProps.style} numberOfLines={4}>
            Nice text
          </Text>
          <TouchableRipple>
            <Text>Edit</Text>
          </TouchableRipple>
        </View>
      )}
    />

Now I end up with forking react-native-paper to make some things possible.

#993 ->
https://github.com/profects/react-native-paper/blob/a18bdcd961e0aa596ed9355cdd0726c4c43e815a/src/components/Menu/MenuItem.tsx

https://github.com/profects/react-native-paper/blob/a18bdcd961e0aa596ed9355cdd0726c4c43e815a/src/components/List/ListAccordionRenderer.tsx

[harrisrobin]

I would love to be able to install individual components without importing the entire library.

[Trancever]

I would love to be able to install individual components without importing the entire library.

We have a babel plugin that removes not used components from bundle. Check this

[BalalRaza]

Just like there is an error prop in TextInput button that changes the border of the TextInput to red, I would like that there be another success prop that would change the border to green or any colour that I pass. It will make it more flexible. Currently, we've found that the way to change border colour of TextInput is through the theme's color's placeholderColor property, which is very weird.

More than the success prop, we would like to control the borderColor of the TextInputs.

[ravics09]

I would like to see a Date and Time Picker Component in this library, which will be compatible on both ios and android platform. It will be very helpful.

[jayu]

I would like to be able to import <Icon/> from react-native-paper

Instead of

import Icon from 'react-native-vector-icons/MaterialCommunityIcons'

I could just

import { Icon } from 'react-native-paper'

[jonasgroendahl]

More components, a slider for example! :) Maybe a Grid?

[nandorojo]

Typescript suggestions for icon names

If you give an icon an invalid name, you get an error telling you all of the available icon names:

<Button icon="some-inexistent-name"></Button>

// Invalid prop `name` of value `some-inexistent-name` supplied to `Icon`

It would be useful if the icon prop had Typescript suggestions with the available names.

Also, in the error message, it would be useful to add a link to a website that has the available icon names.

[meftunca]

Extra

Content

Add auxiliary components. For example, keyboard management, theme change, or self-organizing picture component depending on width or height.

• <AutoSizeImage width={120} or height={120} /> flexible image component or useGetImageSize(uri)
• use(Keyboard,Theme,Statusbar,Dimensions,...)
• BottomSheet
• Collapse Effect

[usmansbk]

Non-component Snackbar like react-native-snackbar
Custom Picker

[Trancever]

Non-component Snackbar like react-native-snackbar

Check the docs. We do have a Snackbar component.

[usmansbk]

@Trancever Yeah! It's awesome but sometimes I want the option of calling it like Snackbar.show(Message) instead of <Snackbar>Message</Snackbar>

[mschipperheyn]

I would like to see component Theme overrides to execute in a central spot, like in @material-ui instead of having to create local versions.

[mschipperheyn]

@usmansbk that sounds more like program flow. You could implement this using AppContent or redux.

[jstansbe]

Dropdown/Select Component

Content

I'd love to see a select component from this lib.
I know a request for a drowdown component has already been posted but i wanted to expand a bit on this...

I would like to call out the dropdown/select component from the react material-ui library for guidance. This is all written in js and is still smooth! (https://material-ui.com/components/selects/)

[Trancever]

@iamclaytonray @jstansbe Could you point me to the Material Design Guidelines page that describes a select component for Android?

[zufarzhan]

@Trancever I think there is no specific guideline how to make "select" component, it's more like extension of the "menu" component, which is called "Exposed dropdown menus": https://material.io/components/menus/#exposed-dropdown-menu

There are though guidelines for pickers: https://material.io/components/pickers/#mobile-pickers
Would be nice to have them here as well :)

And maybe sliders? https://material.io/components/sliders/

[Trancever]

@zufarzhan You should be able to implement "Exposed dropdown menu" with Menu component easily. Just use TextInput wrapped with Touchable as an anchor and add some margin/padding to the menu to move it below TextInput. We don't really want to implement all possible cases in this lib. We want to provide building blocks that users can use to build more complex UI.

[jstansbe]

@Trancever @zufarzhan I've used the menu component with the text input to create what you're describing... and it does work. But isn't this the equivalent to <List.Icon /> or <Card.Actions />? The user could easily combine a list item and icon just fine, but the value comes from react-native-paper's application of material guidelines. There is a ton of value in creating a dropdown (text input + menu)... this is also a component that is missing from other notable UI libraries and would help differentiate rnp from them. I'm not really aware of rnp's goals though, so maybe some of these points are irrelevant.

Also, If it helps I can work on submitting a starting point (or work on the component throughout the conception=>release process).

[iamclaytonray]

Can we limit these convos or bring them elsewhere? The RFC is going to get muddied up with convos vs clear points that the community wants. (Plus, I'm getting spammed with emails for an issue I want to subscribe to but not so much on side conversations)

[jsamr]

[Typescript] Some component prop types are not exported

I would like to extend TextInput. To do so, I need the prop type, TextInputProp. As of today, I have to import the types like this:

import { TextInputProps } from 'react-native-paper/lib/typescript/src/components/TextInput/TextInput'

This is very unsatisfying, because this path could change at any time and depends on your build logic. A tool such as api-extractor would rightfully forbid you from not exporting indirect types, as it undermines the clear identification of your library API surface and prevent users from easily extending core features.

Component props are obviously part of the API surface, and as such must be exported.

[mschipperheyn]

One of the things I like about material-ui, is that the components are aggregated from sub components and these sub components are easily customizable. Since RN doesn't have the kind of style selectors available to style children '.TextInput > .MuiFormLabel-root' with all sorts of specificity possible.

It would make sense to me to expose these sub container style objects on the api so you can optionally override this. It's kind of an ugly solution though. I guess the overriding theme of my suggestions is: make it possible to easily deviate from default Material Design.

[BalalRaza]

Have text input adornments to represent states other than error, like success state or warning, etc. Something like this:

[likeSo]

@likeSo I am using expo sdk 42.0.1

It seems not about Paper, most components got this problem on Expo in DEV mode. Maybe you should file a new issue to the Expo team?

[joeyfigaro]

It'd be great if we had more control over icon positioning* / content styling for at least FAB – current app is using one and it's way too tiny. Can override width/height of the button, but the icon isn't centered.

[matinzd]

It does not feel native. Ripple effect does not work on ios.

[sepsol]

Ripple Effect

It would be great if we could optionally disable or configure the ripple effect for different components.

Option to disable ripple

In my case I think I would be fine with a Checkbox.Item without ripple effect, because in my eyes the ripple hints at a visually non-existing button area around the Checkbox.Item which I don't like. I think the checkbox animation itself is sufficient in my case.

Option to edit ripple effect

I also am using the ToggleButton and I have a roundness defined both in its style props and in the global theme object provided by the PaperProvider. Unfortunately though the ripple effect on the ToogleButton doesn't respect the roundness and there's no way to get around it. It would be nice if we had props regarding ripple to configure it wherever it's present in a component.

[osh91]

Each component is very limited, you can't edit e.g. IconButtons or there is no toggle switch button (like in rectangular shape).
To call themes in TypeScript is horrifying to newbies. It cost energy and time to solve out how to call and sadly some doesn't work.

Today got bug IconButton because it is missing properties hasTVPreffered Focus and Properties..... but in the RNP docs doesn't say that it is required to call.

Why? Why is this so painful to use this?

[timdp]

A lot of components use TouchableRipple internally, but only some of them use prop drilling. In particular, the ripple color gets computed from the theme's text color on the fly. This means that you cannot have a different ripple color without changing your text color. I would like to have the ripple color be part of the theme rather than relying on magic constants locked inside TouchableRipple.

In case anyone is looking to work around this for now: you can monkeypatch TouchableRipple to support theme.colors.ripple by overloading React's render() method. Obviously, this is really hacky.

Code sample

if (!TouchableRipple._patched) {
  const oldRender = TouchableRipple.render
  TouchableRipple.render = function (props, ...args) {
    const { colors } = useTheme()
    props = {
      ...props,
      rippleColor: colors.ripple
    }
    return oldRender.call(this, props, ...args)
  }
  TouchableRipple._patched = true
}

[timdp]

List.Item takes a titleEllipsizeMode and a descriptionEllipsizeMode but List.Accordion doesn't.

[ghost]

Docs are pretty ugly. Could use some inspiration: https://reactnavigation.org/docs/getting-started/

[aprilmintacpineda]

[Typescript] Some component prop types are not exported

I would like to extend TextInput. To do so, I need the prop type, TextInputProp. As of today, I have to import the types like this:

import { TextInputProps } from 'react-native-paper/lib/typescript/src/components/TextInput/TextInput'

This is very unsatisfying, because this path could change at any time and depends on your build logic. A tool such as api-extractor would rightfully forbid you from not exporting indirect types, as it undermines the clear identification of your library API surface and prevent users from easily extending core features.

Component props are obviously part of the API surface, and as such must be exported.

2022 and still the same. Code above won't even work for all components, this makes it really hard to extend react-native-paper components.

[aprilmintacpineda]

fontConfig in theme is pretty useless I think, or at least the docs doesn't tell us how to use it.

So I have:

const fontConfig: Fonts = {
  regular: {
    fontFamily: 'Roboto-Regular',
    fontWeight: 'normal'
  },
  medium: {
    fontFamily: 'Roboto-Medium',
    fontWeight: '500'
  },
  light: {
    fontFamily: 'Roboto-Light',
    fontWeight: '300'
  },
  thin: {
    fontFamily: 'Roboto-Thin',
    fontWeight: '100'
  }
};

export const paperTheme: Theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: primary,
    text: text,
    error: red,
    accent: accent
  },
  fonts: configureFonts({
    ios: fontConfig,
    android: fontConfig,
    web: fontConfig
  })
};

however, if I do:

<Text style={{ fontWeight: '500' }}>
Hello
</Text>

It will only work for ios, it won't work for android, because in Android, I have to do:

<Text style={{ fontWeight: '500', fontFamily: 'Roboto-Medium' }}>
Hello
</Text>

For it to work. My current workaround is:

import React from 'react';
import { TextStyle } from 'react-native';
import { Text as RNPText } from 'react-native-paper';

const fontConfigs: Record<string, TextStyle> = {
  regular: {
    fontFamily: 'Roboto-Regular',
    fontWeight: 'normal'
  },
  medium: {
    fontFamily: 'Roboto-Medium',
    fontWeight: '500'
  },
  light: {
    fontFamily: 'Roboto-Light',
    fontWeight: '300'
  },
  thin: {
    fontFamily: 'Roboto-Thin',
    fontWeight: '100'
  }
};

const Text: React.FunctionComponent<{
  style?: TextStyle;
  font?: keyof typeof fontConfigs;
}> = ({ children, font = 'regular', style }) => {
  const styleFromFontConfig = fontConfigs[font];

  return (
    <RNPText style={[styleFromFontConfig, style]}>
      {children}
    </RNPText>
  );
};

export default Text;

Then I'll use this custom text instead of the one that RNP provides.

[aprilmintacpineda]

It is extremely hard to extend components of RNP, it's my first time using RNP with TS, I used RNUILib before, and I didn't encounter these kinds of problems which I will consider BASIC.

TextInput.tsx

import React from 'react';
import {
  HelperText,
  TextInput as RNPTextInput
} from 'react-native-paper';
import { TextInputProps } from 'react-native-paper/lib/typescript/components/TextInput/TextInput';
import { flatten } from 'utils/arrays';

const TextInput: React.FunctionComponent<
  {
    error: string;
  } & TextInputProps
> = ({ style, error, ...textProps }) => {
  return (
    <>
      <RNPTextInput
        mode="outlined"
        style={flatten({ backgroundColor: '#fff' }, style)}
        error={Boolean(error)}
        {...textProps}
      />
      <HelperText type="error">{error}</HelperText>
    </>
  );
};

export default TextInput;

custom component above will produce:

Doing:

type Props = TextInputProps & {
  error: string;
};

Produces:

This is crazy.

[aprilmintacpineda]

RNP IS VERY HARD TO USE WITH TS.

[vicary]

@aprilmintacpineda While React Native Paper may not be perfect, your issues are resolvable.

You may forcibly pull un-exported props out with the built-in type utility in React.

import type { ComponentProps } from "react";

const MyTextInput: FunctionComponent<ComponentProps<TextInput>> = (...) => { ... };

When there are field conflicts, typescript will friendly reminds you that this type is not even possible by spitting out a never type. { error?: boolean } & { error: string } logically means never.

You may remove the original fields you override with &:

type Props = Omit<TextInputProps, "error"> & { error: string };

Or, depends on how you prepare to use your component, at least make yours compatible with the parent type:

type Props = TextInputProps & { error: boolean | string };

[aprilmintacpineda]

Thanks for the insights, very helpful, I will try them out!

EDIT:

this worked for me:

import { ComponentProps } from 'react';
import { TextInput } from 'react-native-paper';

type RNPTextInputProps = ComponentProps<typeof TextInput>

[effinrich]

I've only recently started using react-native and react-native-paper. RNP is great, easy to use, no cross-platform hiccups and performs as claimed in that way. The only issue I have is preferential and lies in the styling. I've been a user and proponent of styled-system/styled-components and anything built on those systems for years, because they simply make component customization incredibly fast. Everything is built with the same props using attributes to space, shape, color, whatever, as well as most components made with a grid system in mind. So this:

const styles = StyleSheet.create({
  button: {
    flexDirection: 'row',
    marginTop: 50,
    marginHorizontal: 16,
    marginBottom: 33,
    height: 40,
    backgroundColor: color.primary,
    alignItems: 'center',
    justifyContent: 'center'
  }
})

const Button = () => {
  return (
    <Button
      style={styles.button}
      onPress={nextScreen}
      mode="contained"
    >
      Sign in
    </Button>
  )
}

Becomes this:

const Button = () => {
  return (
    <Button
      direction="row" //flexDirection: 'row'
      mt={50} // marginTop: 50,
      mx={16} // marginHorizontal: 16
      mb={33} // marginBottom: 33
      h={40} // height: 40
      bg={color.primary} // backgroundColor: color.primary
      align="center" // alignItems: 'center'
      justify="center" // justifyContent: 'center'
      onPress={nextScreen}
      mode="contained"
    >
      Sign in
    </Button>
  )
}

In the same vein and based on the same styled-system, a Flex and Box grid system would be great using the same attributes in the button example. This example also illustrates the array based breakpoint system:

<Flex direction={['column', 'row']}>
  <Box w={[1/2, 1]}>
   {stuff}
  </Box>
  <Box w={[1/2, 1]}>
   {stuff}
  </Box>
</Flex>

[joshraker]

As some have mentioned, including #2529, it would be nice to be able to disable the ripple effect for touchable components.

I tried making a simple software keyboard with react-native-paper buttons but onPress and each subsequent button press isn't triggered until after the ripple effect finishes so it's basically useless on Android. iOS is fine since all it does is highlight. I tried to work around this by using the onTouchStart and onTouchEnd events instead but, even though the ripple didn't occur, the delay still exists.

I don't mind the ripple effect and I think having a way to make the ripple async so that onPress triggers immediately and subsequent presses aren't delayed would be ideal but simply being able to disable it would also be sufficient.

[midhungopipk]

can any one explain why the button label is not in ios.

<Button
mode="contained"
color="#F6AA41"
style={{
height: height(6),
width: width(90),
borderRadius: height(1),
}}
labelStyle={{
color: 'white',
fontSize: totalSize(1.8),
fontFamily: typography.FONT_FAMILY_BOLD,
}}
contentStyle={{
alignItems: 'center',
height: '100%',
}}
onPress={()=>}
TYPE CODE INSTEAD

its bold in android only....why is that...?

[PakDragoon]

The datatable are pain, the docs are useless.

[njoromyke]

Are you working on select and Datepickers?

[PakDragoon]

Are you working on select and Datepickers?

No, datatables with fetched data.

[whitedark9]

1. onPressIn, onPressOut in all Buttons
2. ActivityIndicator.Screen for whole screen to use when a list of data is not visible. or Skeleton.
3. FileInput like web <input type='file' /> or TextInput.Group like in bootstrap. With 'Touchable + Input' row, with 'onPress' function.

[d4rky-pl]

What grinds my gears the most is that React Native Paper 5 in theory supports both Material Design 2 and 3 but in practice what happens is the moment you actually switch to MD2, you're on your own. The documentation doesn't mention that there are major differences in how themes, components and sizings work (for ex. I just learned the hard way that Text component no longer supports variant if you switch to 2). It's actually much easier to just downgrade to version 4 and use the docs from there.

[bockoblur]

Theming

Importing Generated Themes

It would be great to be able to import Material Themes generated and exported using Material theme builder, namely some of

• Material Tokens (DSP) format
• JSON theme file (created with Theme Builder for Figma)

Or maybe this should be a feature request for material-theme-builder repo? What do you think makes more sense?

[njoromyke]

Are you working on select and Datepickers?

Any progress on this?

[Abdalrzakalsouki]

1. Select list with diffrenet options (dropdown, search, modal, native IOS)
2. State for some elements (textinputs, perhaps a loading prop for buttons)
3. Skeleton

[crystalarcus]

I'd love to see complete set of colors from Material You, I have created an issue here: #4343
Currently, Paper don't have
surfaceContainer
surfaceContainerHigh
surfaceContainerHighest
surfaceContainerLow
surfaceContainerLowest
surfaceBright
surfaceDim

Currently paper have this:
primary
primaryContainer
secondary
secondaryContainer
tertiary
tertiaryContainer
surface
surfaceVariant
surfaceDisabled
background
error
errorContainer
onPrimary
onPrimaryContainer
onSecondary
onSecondaryContainer
onTertiary
onTertiaryContainer
onSurface
onSurfaceVariant
onSurfaceDisabled
onError
onErrorContainer
onBackground
outline
outlineVariant
inverseSurface
inverseOnSurface
inversePrimary
shadow
scrim
backdrop
elevation
The surfaceContianer colors provides amazing palette for surfaces, should be included in Paper 👍

[deepakkumardk]

Global Component props override

For example I want to override the Surface component mode prop and change from the default value from elevated to flat like mode={'flat'}

If there is any way to do it now, please let me know, if no, then I guess it would be better to have it to override/set the component props just like overriding the theming.
For reference rn-ui-lib also has this

[meftunca]

It would be very good to be globally editable like @mui
https://mui.com/material-ui/customization/theming/