Open Trancever opened 4 years ago
I'd love to see a select component from this lib.
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:
zIndex
value is. 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>
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.
https://github.com/callstack/react-native-paper/issues/993 -> https://github.com/profects/react-native-paper/blob/a18bdcd961e0aa596ed9355cdd0726c4c43e815a/src/components/Menu/MenuItem.tsx
I would love to be able to install individual components without importing the entire library.
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
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.
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.
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'
More components, a slider for example! :) Maybe a Grid?
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.
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) Non-component Snackbar like react-native-snackbar
Custom Picker
Non-component Snackbar like react-native-snackbar
Check the docs. We do have a Snackbar
component.
@Trancever Yeah! It's awesome but sometimes I want the option of calling it like Snackbar.show(Message)
instead of <Snackbar>Message</Snackbar>
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.
@usmansbk that sounds more like program flow. You could implement this using AppContent or redux.
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/)
@iamclaytonray @jstansbe Could you point me to the Material Design Guidelines page that describes a select component for Android?
@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/
@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.
@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
Also, If it helps I can work on submitting a starting point (or work on the component throughout the conception=>release process).
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)
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.
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.
Have text input adornments to represent states other than error, like success state or warning, etc. Something like this:
because of this https://github.com/callstack/react-native-paper/pull/1061
@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.
An example of this implementation would be very helpful. Tried wrapping TextInput
with a TouchableWithoutFeedback
, but the TextInput
gets focused and onPress
event does not fire.
Add suffix, prefix, leading and trailing Icon to TextInput #903
that issue is pretty old!
Hi, i am developing the web app using react native. I found this plugin and it is useful for me. However, my datatable title is too long so i add numberofLines want to solve the problem, it doesn't work. It still showing "..." of my long title. Hope can fix this issue. Thanks
An example of this implementation would be very helpful. Tried wrapping
TextInput
with aTouchableWithoutFeedback
, but theTextInput
gets focused andonPress
event does not fire.
@mikedizon You can wrap TextInput
in a View
with pointerEvents
set to none
to prevent focus on TextInput
.
An example of this implementation would be very helpful. Tried wrapping
TextInput
with aTouchableWithoutFeedback
, but theTextInput
gets focused andonPress
event does not fire.@mikedizon You can wrap
TextInput
in aView
withpointerEvents
set tonone
to prevent focus onTextInput
.
Thanks! There's also a down arrow on the right side of the TextInput
that indicates that the field is a dropdown. Any plans to support trailing and leading icons in TextInput
?
For the sake of expedience, I'm going to see if https://github.com/n4kz/react-native-material-dropdown matches the RNP's inputs and report back. I appreciate all the work!
It would be nice to have an autocomplete search component similar to this one:
Autocomplete
Content
It would be nice to have an autocomplete search component similar to this one:
This could be made with the existing components if react-native-paper supported
import Highlighter from 'react-native-highlight-words';
<ListItem title={
<Highlighter
highlightStyle={{backgroundColor: 'yellow'}}
searchWords={['and', 'or', 'the']}
textToHighlight='The dog is chasing the cat. Or perhaps they're just playing?'
/>} />
An example of this implementation would be very helpful. Tried wrapping
TextInput
with aTouchableWithoutFeedback
, but theTextInput
gets focused andonPress
event does not fire.@mikedizon You can wrap
TextInput
in aView
withpointerEvents
set tonone
to prevent focus onTextInput
.Thanks! There's also a down arrow on the right side of the
TextInput
that indicates that the field is a dropdown. Any plans to support trailing and leading icons inTextInput
?For the sake of expedience, I'm going to see if https://github.com/n4kz/react-native-material-dropdown matches the RNP's inputs and report back. I appreciate all the work!
Just a quick follow up on this. I wound up using the react-native-material-dropdown
component -- as expected, parts of the TextInput
don't match the implementation from react-native-paper
exactly. I'm willing to live with that for now, but it would be great if this component was available out of the box. Seems like there's enough interest in it.
I'd like the review process to be a little faster. Sometimes it takes to long to an important fix or new feature to get merged.
All theming should be able to be overridden.
Example.... the label of an active TextInput uses colors.primary
from the active theme. When the background and primary color is white it's unreadable and there's no way to change it.
Not Editing
Editing (the label and the cursor become white and almost invisible)
An example of this implementation would be very helpful. Tried wrapping
TextInput
with aTouchableWithoutFeedback
, but theTextInput
gets focused andonPress
event does not fire.@mikedizon You can wrap
TextInput
in aView
withpointerEvents
set tonone
to prevent focus onTextInput
.
This workaround causes another issue, as I want users can typing to reduce the options list, then select one they want. In this way user has to click twice in order to start typing.
@smkhalsa comment:
while I agree that adding FastImage as a dependency and using it by default is not the right way to go, I feel the underlying issue deserves more discussion. react-native-paper doesn't currently provide a way to override the default Image component within built-in components like Card.Cover and Avatar.Image. This is an issue for certain use cases such as offline caching. Your suggestion above of re-writing the component is not a very maintainable approach. Any other ideas?
https://github.com/callstack/react-native-paper/pull/932#issuecomment-479946027
Similar to Material UI's prop & styling overrides. We'd like to have global code like that housed in the theme file as well. I see that you mention moving away from that here but seeing if you can reconsider!
In order to promote consistency between components, and manage the user interface appearance as a whole, Material-UI provides a mechanism to apply global changes.
To use something like
const theme = createMuiTheme({
overrides: {
MuiButton: {
root: {
fontSize: '1rem',
},
},
},
});
So we can still import buttons directly from the library to promote consistency
import Button from 'react-native-paper/Button' // Still use this
import CustomButtonV1 from '../components/buttonv1' // Instead of this
https://material-ui.com/customization/components/#global-theme-override
I would really like it if there was tooltip support for Appbar.Action
, IconButton
and perhaps other components.
https://material.io/components/tooltips/
I would really like it if we could disable this on demand to keep the behaviour the same as in 2.x, or at least find out why it was implemented?
@sshanzel I would suggest making a separate issue for this with a reproducible example.
Hi and thanks for the amazing job done here, I would really like if you could add the following into the core:
More props
by default and the one I am especially thinking of is tag: PropTypes.elementType
to replace the default rendered component. This is my own preference, and really hope it will be accepted, we have used that widely in @bootstrap-styled/v4 and it gave us a lot of flexibility to reuse the styling (this is especially useful for libs of UI components like RNP)
The DataTable.Cell
is truncating the text because this is the guidelines, however, a props could have been used with numberOfLines={1}
=> `numberOfLines={props.lines}. I see my self many times copying your component and proceed to the customization on my side, while this could be directly included, I have already submited a PR for this: https://github.com/callstack/react-native-paper/pull/1764
Agree with https://github.com/callstack/react-native-paper/issues/1489#issuecomment-558680060 , adding more default components, such as <Select />
. I saw myself doing one, and many other will, we should group the effort. If you are interested by my Select implementation, it's just below :smiley:
I'm currently facing the problem of :
I'd like to be able to pass a color key in the style prop of Snackbar to edit the color of the text label. I've faced this problem only on Snackbar for now, because I use the library not for so long, but I'm pretty sure this problem happens on lots of components
Thanks in advance! :)
@benjaminaudet I am pretty sure such improvement as a PR will be accepted. color
is a props widely used in RNP. Will you take care of it?
Modal wrapped in SafeAreaView
I would really like it if we could disable this on demand to keep the behaviour the same as in 2.x, or at least find out why it was implemented?
Hi! this PR solves it!
Please remove the concept of font icons and passing icons by name in the button. A button component should have a startIcon
and endIcon
that can be any kind of component (but normally would be a react-native-svg icon).
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)