Material Design for React Native (Android & iOS)

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

I tried to use react native paper components for my react native applications. Currently i use "react-native-paper": "^3.9.0", I launched the application in Android mobile I got warnings `[Tue May 05 2020 13:06:41.270] WARN Require cycle: node_modules\react-native-paper\lib\module\components\Checkbox\Checkbox.js -

node_modules\react-native-paper\lib\module\components\Checkbox\CheckboxItem.js -> node_modules\react-native-paper\lib\module\compo nents\Checkbox\Checkbox.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. [Tue May 05 2020 13:06:41.272] WARN Require cycle: node_modules\react-native-paper\lib\module\components\FAB\FAB.js -> node_mod ules\react-native-paper\lib\module\components\FAB\FABGroup.js -> node_modules\react-native-paper\lib\module\components\FAB\FAB.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. [Tue May 05 2020 13:06:41.273] WARN Require cycle: node_modules\react-native-paper\lib\module\components\RadioButton\RadioButto n.js -> node_modules\react-native-paper\lib\module\components\RadioButton\RadioButtonItem.js -> node_modules\react-native-paper\lib
module\components\RadioButton\RadioButton.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. [Tue May 05 2020 13:06:41.273] WARN Require cycle: node_modules\react-native-paper\lib\module\components\Appbar\Appbar.js -> no de_modules\react-native-paper\lib\module\components\Appbar\AppbarHeader.js -> node_modules\react-native-paper\lib\module\components
Appbar\Appbar.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. [Tue May 05 2020 13:06:41.273] WARN Require cycle: node_modules\react-native-paper\lib\module\components\ToggleButton\ToggleBut ton.js -> node_modules\react-native-paper\lib\module\components\ToggleButton\ToggleButtonRow.js -> node_modules\react-native-paper\l ib\module\components\ToggleButton\ToggleButton.js`

React Native version:

info Fetching system and libraries information... System: OS: Windows 10 10.0.18363 CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz Memory: 12.35 GB / 23.88 GB Binaries: Node: 12.16.2 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: API Levels: 27, 28, 29 Build Tools: 28.0.3, 29.0.2 System Images: android-28 | Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom Android NDK: 20.0.5594570 IDEs: Android Studio: Version 3.6.0.0 AI-192.7142.36.36.6241897 Languages: Java: 1.8.0_211 - /c/Program Files/Java/jdk1.8.0_211/bin/javac Python: Not Found npmPackages: @react-native-community/cli: Not Found react: 16.11.0 => 16.11.0 react-native: 0.62.2 => 0.62.2 npmGlobalPackages: react-native: Not Found

Steps To Reproduce

1. yarn add react-native-paper
2. react-native run-android

Expected Results

I don't want to see warnings about react native paper

I'm trying to use react-native-paper in conjunction with react-native-web. React-native-web is an npm package which aliases react-native, and allows you to run react-native apps in the browser (ie: no simulator). It renders components as android, and it uses react-native v0.55.

Current behaviour

When I run the app without using react-native-paper, it runs fine. When I use react-native-paper however, I currently get an error message (see below) and the app fails to compile.

Expected behaviour

I expect for the app to run as a react-native-web app, with* react-native-paper* providing components. Below is the error message I receive when I run npm start.

Failed to compile
./node_modules/react-native-paper/src/index.js
SyntaxError: /media/binyamin/Seagate Expansion Drive/Documents/Coding/react-native/my-web-app/node_modules/react-native-paper/src/index.js: Unexpected token (4:12)

  2 | 
  3 | import * as Colors from './styles/colors';
> 4 | import type { Theme as _Theme } from './types';
    |             ^
  5 | 
  6 | export type Theme = _Theme;
  7 | 

Code sample

Github Repo: https://github.com/b3u/my-web-app Just run npm start to reproduce the issue

Screenshots (if applicable)

What have you tried

1. Search Google
2. Search existing issues
3. Create a custom theme
4. Opt out of using icons
5. Downgrade to v2.1.3

Your Environment

| software | version | --------------------- | ------- | ios or android | n/a (the web app displays as android) | react-native | react-native-web v0.9.8 | react-native-paper | v2.2.8 | node | v10.13 | npm or yarn | npm v6.4.1

Current behaviour

Expected behaviour

Code sample

Screenshots (if applicable)

What have you tried

Your Environment

| software | version | --------------------- | ------- | ios or android | | react-native | | react-native-paper | | node | | npm or yarn |

I use this [email protected]^4.10.0 with typescript but got some typing errors

package.json

{
  "name": "expo-app-",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "start": "react-native start"
  },
  "dependencies": {
    "expo": "~43.0.0",
    "expo-splash-screen": "~0.13.3",
    "expo-status-bar": "~1.1.0",
    "expo-updates": "~0.10.5",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.2",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-paper": "^4.10.0",
    "react-native-reanimated": "~2.2.0",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.8.0",
    "react-native-web": "0.17.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.1",
    "@types/react-native": "~0.64.2",
    "typescript": "^4.4.4"
  },
  "private": true
}

Motivation

Implement Toggle Button component to the library, specified on the Material Design guidelines. Solves #124

Test plan

Go to Examples List and select Toggle Button to test the new feature.

I just init a expo typescript project. Then add 'react-native-paper' in my project. When try to use Button component it gives me this typescript error. Do you have any idea why getting error?

Error

No overload matches this call.
  Overload 1 of 2, '(props: Pick<Props, "ref" | "style" | "children" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | ... 57 more ... | "contentStyle"> & { ...; }, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type '{ children: string; mode: "outlined"; onPress: () => void; }' is missing the following properties from type

Code -

<PaperProvider>
  <View >
      <Button mode="outlined" onPress={() => {}}>
         press me
      </Button>
   </View>
</PaperProvider>

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~40.0.0",
    "expo-status-bar": "~1.0.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-paper": "^4.5.0",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "@types/react": "~16.9.35",
    "@types/react-dom": "~16.9.8",
    "@types/react-native": "~0.63.2",
    "typescript": "~4.0.0"
  },
  "private": true
}

The devDependency expo-cli was updated from 3.13.0 to 3.13.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

expo-cli is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot :palm_tree:

Warning

EventEmitter.removeListener('change', ...): Method has been deprecated. Please instead use remove() on the subscription returned by EventEmitter.addListener

Code sample

import { Menu } from 'react-native-paper'; <Menu visible={menu} onDismiss={() => setmenu(false)} anchor={<Ionicons onPress={() => setmenu(true)} name={"settings-sharp"} size={24} color={"#222"} />}> <Menu.Item onPress={() => { }} title="Download" /> <Menu.Item onPress={() => { }} title="Report" /> <Menu.Item onPress={() => { }} title="Cancel" />

Screenshots (if applicable)

Your Environment

| software | version | --------------------- | ------- | ios or android | android | react-native | 0.66.2 | react-native-paper | ^4.10.1 | node | v14.18.1 | npm or yarn | npm | expo sdk | no

GITHUB REPO:- https://github.com/pushpender-singh-ap/sampleRepo

Current behaviour

Snackbar action is not working

Expected behaviour

close snackbar or other function when click action buttons on snackbar

Code sample

<Snackbar visible={this.state.visible} onDismiss={() => this.setState({ visible: false })} action={{ label: 'Undo', onPress: () => { // Do something this.setState({ visible: false }) //<-- problem }, }} > Hey there! I'm a Snackbar.

TO REPRODUCE: `// tsconfig file

{ "compilerOptions": { "allowJs": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "isolatedModules": true, "jsx": "react", "lib": ["es6"], "moduleResolution": "node", "noEmit": true, "strict": true, "target": "esnext" }, "exclude": [ "node_modules", "babel.config.js", "metro.config.js", "jest.config.js" ] }`

SAMPLE CODE: = const StoreFront: React.FC = () => { return ( <ScrollView horizontal={true}> <Card key="key1"> <Card.Cover source={{ uri: "https://image" }} /> <Card.Actions> <Button>Cancel</Button> </Card.Actions> </Card> ))} </ScrollView> ); }; export default StoreFront;

TYPESCRIPT ERROR: = note:( following error present on <Card >, <Button>, etc components of react native paper.) `(alias) const Card: (React.ComponentClass<Pick<Pick<ViewProps & React.RefAttributes & { children: React.ReactNode; style?: StyleProp; theme: Theme; }, "style" | "children" | "ref" | "onLayout" | ... 49 more ... | "onTouchEndCapture"> & { ...; } & { ...; } & { ...; }, "style" | ... 55 more ... | "elevation"> & { ...; }, any> & hoistNonReactStatics.NonReactStatics<...>) | (React.FunctionComponent<...> & hoistNonReactStatics.NonReactStatics<...>) import Card

Property 'accessibilityStates' is missing in type '{ children: Element[]; key: string; }' but required in type 'Pick<Pick<ViewProps & RefAttributes & { children: ReactNode; style?: StyleProp; theme: Theme; }, "ref" | "style" | "removeClippedSubviews" | "hitSlop" | "onLayout" | ... 48 more ... | "accessibilityStates"> & { ...; } & { ...; } & { ...; }, "ref" | ... 55 more ... | "elevation">'.ts(2741) `

Current behaviour

The button seems to be not as responsive as expected. It just feels laggy. The onPress function seems to be fired after the animation is finished? Please take a look at the gif below where compare the Paper's button with Element's button. The logic in the onPress is exactly the same code.

This only occur on mid/low end device. FYI, my device is running on SD 636.

Expected behaviour

Button should be responsive.

Code sample

https://snack.expo.io/@elabar/paper-button-slow

Screenshots (if applicable)

Highlight:

• The button seems to be hold on at the 'pressIn' state for awhile? (I did not hold the button)

Highlight:

• The button seems to be hold on at the 'pressIn' state for awhile? (I did not hold the button) And start the loading afterwards.

What have you tried

The problem was found in one of my production apps first. I tried creating a reproduce with a clean npx react-native init, and I can confirm this is a valid issue. The gif above is run on development mode on purpose to show the sluggishness easily.

Strange thing is, this problem is more severe with RN CLI. It feels much better with expo.

I then check on react-native-elements codebase. The main difference I found is Paper is using requestAnimationFrame. Not sure if this is related tho.

Your Environment

| software | version | --------------------- | ------- | ios or android |Android 11 | react-native |0.64.2 | react-native-paper |4.9.2 | node |14.16.1 | yarn|1.22.10 | expo |42.0.1 |react-native-vector-icons|8.1.0

As you can see in the reference below, if the v3 theme is used it uses theme surface color no matter what backgroundColor one passes through the barStyle prop.

The NavigationBar Guidelines says:

The container can have a color fill to provide separation from the content behind it.

https://github.com/callstack/react-native-paper/blob/6afa4fb98c6826c4d6b80db055ef8f21ed07b59a/src/components/BottomNavigation/BottomNavigation.tsx#L602-L605

Also the elevation should probably be adjustable. According to the NavigationBar Spec it should actually have a default elevation of 2 but it is currently hardcoded to 0:

https://github.com/callstack/react-native-paper/blob/6afa4fb98c6826c4d6b80db055ef8f21ed07b59a/src/components/BottomNavigation/BottomNavigation.tsx#L728

One can barely see it in the example picture:

I have checked many doc's for resolve this issue but can't find anything. Here i have added the video how it works and image for what is should have to look like..

1. Video: Issue is value is at center instead top.
2. Image: The value should have on the top when it's not in focus.
3. Here is my code.

      <TextInput
            mode="outlined"
            label="Outlined input"
            placeholder="Type something"
            multiline
            style={{height: 150}}
       />

https://user-images.githubusercontent.com/86836170/182808774-e149bf0c-8b3a-4f73-8cf3-66eebdb5a97b.mov

Here is my version codes.

react-native: 0.66.4 react-native-paper: 4.12.1 react-native-vector-icons: 9.1.0

Expo code example: https://snack.expo.dev/@shravancentricwave/textinput.affix?name=TextInput.Affix&description=https%3A%2F%2Fcallstack.github.io%2Freact-native-paper%2Ftext-input-affix.html&code=import%20*%20as%20React%20from%20%27react%27%3B%0Aimport%20%7B%20TextInput%20%7D%20from%20%27react-native-paper%27%3B%0A%0Aconst%20MyComponent%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20%5Btext%2C%20setText%5D%20%3D%20React.useState(%27%27)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20mode%3D%22outlined%22%0A%20%20%20%20%20%20label%3D%22Outlined%20input%22%0A%20%20%20%20%20%20placeholder%3D%22Type%20something%22%0A%20%20%20%20%20%20right%3D%7B%3CTextInput.Affix%20text%3D%22%2F100%22%20%2F%3E%7D%0A%20%20%20%20%2F%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aexport%20default%20MyComponent%3B&dependencies=react-native-paper

Current behaviour

crashed on react native 0.69.1 with fabric enabled

crashes saying dispatch command called without surface id - fabric dispatch command must be called through fabric jsi api

Expected behaviour

to work normally

work normally

Code sample

Screenshots (if applicable)

What have you tried

works in paper

debug crash information

Your Environment

windows 10 | software | version | --------------------- | ------- | ios or android | android | react-native | 0.69.1 | react-native-paper | 4.11.1 | node | 14.0 | npm or yarn | 6 | expo sdk | none

fabric is enabled

Currently in Appbar, .type of the children is used to determine what the child is for e.g. AppbarBackAction

Is it possible to override a component's .type so that it can be picked up as the back action?

I can see how this would be done if a different property was used, such as displayName

AppbarBack.displayName = Appbar.BackAction.displayName;

| software | version | --------------------- | ------- | react-native-paper | 5.0.0-rc.3

This PR introduces new component named: SegmentedButton.

Summary

General overview of the component: https://m3.material.io/components/segmented-buttons/overview

Highlights:

• single or multi-selection
• segmented buttons can have 2-5 segments, segments cannot wrap into a new line
• icons can be used in place of labels
• icon next to the label is optional

Screenshot:

Test plan

Write tests for this component.