We Keep Coding

Trouble Loading Expo React Native On Expo Go

Im having trouble rendering my Expo React Native App app in Expo Go. App is completely fine on web but when I try to render on mobile I get these errors. Before when I removed certain elements it was working but now that I've added a lot more libraries such as native base Im started to see more errors appear. Im somewhat new to coding so bear with me. Thank You!
Mobile Response
Original Code

You need to add alt prop to Image component
like this <Image source={} height={} width={} alt="description of image" />
border is not valid style property use from this
"borderBottomColor",
"borderBottomLeftRadius",
"borderBottomRightRadius",
"borderBottomWidth",
"borderColor",
"borderLeftColor",
"borderLeftWidth",
"borderRadius",
"borderRightColor",
"borderRightWidth",
"borderStyle",
"borderTopColor",
"borderTopLeftRadius",
"borderTopRightRadius",
"borderTopWidth",
"borderWidth`
for alignItems you need to pass any one of these "flex-start", "flex-end", "center", "baseline" or "stretch"

React Native custom cross-platform dropdown select element

I have searched quite thoroughly with not much luck. I am having trouble implementing a simple custom dropdown select element for my application.
I am hoping for a cross-platform (iOS & Android) solution like the simple custom JS dropdown featured here https://www.w3schools.com/howto/howto_custom_select.asp
Is this something I should just be creating myself with react native views and some state? I'm still trying to get a feel of what solutions are unrealistic. Could anyone give me an example from a professional project?
I am trying to avoid using the native Picker from here since I cannot style them to match my designer's needs. https://github.com/react-native-community/react-native-picker
I tried this package but it seems to be having trouble with the latest versions and I need something reliable. https://github.com/sohobloo/react-native-modal-dropdown
I was also looking at this package as it seems to be nearly perfect for my needs but again it has not been updated in 2 years https://github.com/n4kz/react-native-material-dropdown

My recommendation would be to go with something out there, as I will generally make implementation quicker for you, although as you say there might be a trade off in styling.
I've recently been in the situation a few times where I've really had to look hard for good, maintained components for React Native, but they certainly exist.
I've been successfully using react-native-paper recently. You could consider their accordion drop down list but may not suit in styling as it follows material UI guidelines.
https://callstack.github.io/react-native-paper/

I used this in my project and it works perfectly:
https://github.com/mrlaessig/react-native-autocomplete-input
you can just use the onFocus prop to make it dropdown with a click instead of when the user firsts typing and onEndEditing prop to hide it when the user selects an option.
here's my full implementation for reference, I had to go into the code a bit to check for these props since the documentation didn't include it.
<Autocomplete
data={filterNames()}
placeholder={'Who are you here to see?'}
onChangeText={item => setTextAndShowResults(item)}
onFocus={() => setHideResults(false)}
onEndEditing={() => setHideResults(true)}
defaultValue={getDefaultValue()}
keyExtractor={(item, i) => {
return item.id;
}}
returnKeyType={'next'}
listStyle={styles.listStyle}
inputContainerStyle={styles.borderWidth0}
style={styles.autoCompleteButtonStyle}
hideResults={hideResults}
renderItem={({ item, i }) => (
<TouchableOpacity onPress={() => setTextAndHideResults(item)}>
<Text style={styles.listTextStyle}>{item.name}</Text>
</TouchableOpacity>
)}
/>

Reactjs, React, styled-components - Does Rebass library object literal based props rerender components unnecessary?

I am new to react and wondering using react with REBASS : https://github.com/rebassjs/rebass for ui component design and responsiveness, but syntax i say bothers me as they are objects created in render function.
Doesn't it will create unnecessary re-renders ?
if not why not. Not able to understand.
<Box css={**{color:blue}**} width={**[1,1/2,1/4]**} />
https://github.com/rebassjs/grid
Any thoughts?

In my thinking, you want to use the styling is react-app.
if you want make the other styles.css, you have to make it first, and then import the style.
For example, import ./styles.css -> this styles.css have to same located your react App. if you wanna change this, you can control by use './', '../'
and then --> comes from the style.css.
When you want to add the style, you have to use the "ClassName"
The other ways find this~! react_Style ways
Have a good day~!
enter link description here

How to test with Enzyme shallow and component based UIs?

We are using the Semantic React UI library. The code often looks like:
<div className="EditTemplateMetaDataPage">
<Page title={...}>
<Container text>
<Segment>
<Grid columns={1}>
<Grid.Column>
<Button ...>
This might be interesting for many people, using similar React Component libraries like Material UI or Bootstrap React.
We currently use mount with the enzyme library instead of shallow, because we would render only one level deep
, to the first <Grid> component in a test, which is just a visual helper, while we really need the deeper buried Button instead.
Because of performance and to avoid overlapping tests it is recommended to use shallow. (We follow London school TDD, and check only that sub-components exist and their interfaces are used properly)
We came up with using CSS-only for visual components, i.e.
<div className='ui one column grid'>
instead of:
<Grid columns={1}>
But we are not sure, whether this is the optimal approach. Do you have other ideas? How can we use shallow(...) in this case?

shallow actually allow you to use your component as selector, so you can do something like
import Button from '../Button'
const page = shallow(<Page />)
expect(page.find(Button).length).toBe(1)
http://airbnb.io/enzyme/docs/api/selector.html

KeyboardType - React Native

Have you any ideas concerning a KeyboardType for research. I searched and I didn't find any information about that.
In example, in Android, replace the button "Ok" by an icon or another text. Hope there is a KeyboardType specified for research. I don't really want to custom the Keyboard, I think it's not really so easy...
It need to work on IOS and Android

I you are using a TextInput component, you can try the props returnKeyType and keyboardType. They both customize the keyboard layout and works on android and iOS.