In react-native-ios, I am using react-native-datepicker for selecting date from calender.
For this, I am using following link:
Date Picker in react-native-ios
I am adding following code in my render method:
<View style={styles.buttonContainer}>
<TouchableOpacity
style={[styles.bubble, styles.button]}
onPress={() => this.openCalender()}>
<DatePicker
style={{width: 150}}
date={this.state.date}
mode="date"
placeholder="Date"
format="YYYY-MM-DD"
minDate="2015-01-01"
maxDate="2025-12-01"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
iconSource={require('./assets/cal.png')}
onDateChange={(date) => {this.setState({date: date});}}
/>
</TouchableOpacity>
</View>
but I want to add this date picker in dialog. What will be the way for implementing that in react-native-ios.
I want to put Date picker on NavBar Right button click.
I am using this library : https://github.com/xgfe/react-native-datepicker
It works great and cross-platform too.
I am still not sure what you are trying to achieve, but your code above will not work unless you move the <DatePicker/> outside the <TouchableOpacity/>. Once you move that out it should open up the picker as expected by the package.
Related
I created a native module using Swift called CounterView, and when I use it as such:
<CounterView style={{flex: 1}} />
I get this nasty warning! But the thing is, everything works. The error goes away if I remove the style prop, but nothing would render without the {flex: 1}. So I tried to wrap this inside a View, but then it renders relative to the entire screen rather than the wrapper. How can I get rid of this error? Am I doing something wrong to make my component "read-only"?
Type '{ style: { flex: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<unknown, {}, any> & Readonly<NativeMethods>> & Readonly<...> & Readonly<...>'.
Property 'style' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<unknown, {}, any> & Readonly<NativeMethods>> & Readonly<...> & Readonly<...>'.
I can circumvent the issue if I do this:
<View style={{flex: 1}}>
<View style={{flex: 1}} />
<View style={{flex: 1}}>
<CounterView />
</View>
</View>
This takes care of the other half of the screen that will be occupied by another flex:1 container, but this looks pretty silly.
RN 0.57.x exposes iOS's textContentType, so I should be able to get our app to suggest the user's email in a TextInput. This makes the initial experience much smoother because the user doesn't have to type their email address to create an account.
However, setting textContentType to "emailAddress" and keyboardType to "email-address" has no effect.
How can I get the user's personal email addresses suggested in the input control?
For iOS, in addition to adding the textContentType prop to a <TextInput> RN component, you will also need to:
Add the Associated Domains entitlement on your Xcode project
Add the Apple App Site Association file on your website (apple-app-site-association)
See this blog post:
https://blog.brainsandbeards.com/quick-change-that-helps-ios-users-sign-in-quicker-ca54455538bd
And Apple documentation:
https://developer.apple.com/documentation/security/password_autofill/setting_up_an_app_s_associated_domains
I did it using the following way
Add autocorrect true in the email field and give the margin for iOS
Add extra dummy text input between email and password for only the
iOS platform with the wrapping of parent View pointer none for
avoiding focus
<TextInput
autoCompleteType="email"
autoCorrect={true}
clearTextOnFocus={false}
containerStyle={{marginTop: 5, marginBottom: isIos() ? -20 : 0}}
keyboard="email-address"
textContentType="emailAddress"
value={username}
onChangeText={(value): void => onInputChange('username', value)}
/>
{isIos() ? (
<View pointerEvents="none">
<TextInput
focusable={false}
style={{color: '#00000000'}}
onChangeText={(value): void => onInputChange('username', value)}
/>
</View>
) : null}
<TextInput
autoCorrect={false}
clearTextOnFocus={false}
containerStyle={{marginTop: 5}}
keyboard={isIos() ? 'ascii-capable' : 'default'}
secureTextEntry={true}
value={password}
onChangeText={(value): void => onInputChange('password', value)}
/>
How do I know what native props are available for a component to use setNativeProps. In this example, the <TextInput> component doesn't have text as a prop but apparently setNativeProps use text instead of value as a prop. Thank you!
clearText = () => {
this._textInput.setNativeProps({text: ''});
}
render() {
return (
<View style={{flex: 1}}>
<TextInput
ref={component => this._textInput = component}
/>
<TouchableOpacity onPress={this.clearText}>
<Text>Clear text</Text>
</TouchableOpacity>
</View>
);
}
}
This is pretty common in react-native, due to limited documentation. Whenever looking for any information regarding react-native components, it is a good idea to simply look at the .js file you are using. In this case, TextInput, can be found...
Project/node_modules/react-native/Libraries/Components/TextInput/TextInput.js
Hope you can find what you're looking for - with a bit of digging. If you want to look further, looking into the RCT files is a good idea also.
Project/node_modules/react-native/Libraries/Text/RCTTextField.h
Project/node_modules/react-native/Libraries/Text/RCTTextView.h
I am a newbie developer. I'm currently developing apps using React-Native on two platforms, Android and iOS.
I have several constraints when designing this app on the two platforms I use. This app is similar to chat. For the wrapping compiler I use Listview. But there are constraints when running on the iOS platform.
My code is as follows:
<View style={Styles.container}>
<View style={Styles.conversation}>
{this.messages.length > 0
? <ListView
enableEmptySections
style={Styles.messageList}
ref={ref => (this.listView = ref)}
onContentSizeChange={(contentWidth, contentHeight) => {
this.listView.scrollTo({
y: contentHeight,
});
}
}}
dataSource={ds.cloneWithRows(this.messages)}
renderRow={item => <Message data={item} key={item.key} />}
/>
: <Text style={Styles.welcome_message}>Welcome to Kelle</Text>}
</View>
The code above on Android goes well. But when it runs on iOS, the chat text position in the Listview becomes random. Like the picture below:
Has anyone ever experienced anything like this? How should I solve this problem?
I'm developing a React Native app for Android and I've been learning and trying to do my first test in Ruby. Right now I would like my test to wait for the app's main screen to load and then touch a React 'TouchableOpacity' button.
The React Native code is the following:
<View style={styles.row}>
<View style={styles.buttonContainer}>
<TouchableOpacity style={styles.buttonIcon} onPress={this.goToFaqsList.bind(this)} accessible={true} accessibility_id={'FAQs'}>
<Icon style={styles.icon} size={32} name="help" color="white"> </Icon>
</TouchableOpacity>
<Text style={styles.buttonText}>FAQ's</Text>
</View>
<View style={styles.buttonContainer}>
The test:
require 'rubygems'
require 'appium_lib'
capabilities = {
platformName: 'Android',
deviceName: 'Android',
app: '~/workspace/maps2/android/app/build/outputs/apk/app-debug.apk',
}
server_url = "http://0.0.0.0:4723/wd/hub"
# Start the driver
Appium::Driver.new(caps: capabilities).start_driver
Appium.promote_appium_methods Object
wait = Selenium::WebDriver::Wait.new :timeout => 10
wait.until { elementByAccessibilityId("FAQs").displayed? }
source
mobileElement = elementByAccessibilityId("FAQs")
puts(mobileElement)
driver_quit
The " elementByAccessibilityId " was an approach I saw in another topic but I'm getting an error:
Failure/Error: wait.until { elementByAccessibilityId("FAQs").displayed? }
NoMethodError:
undefined method `elementByAccessibilityId' for main:Object
Can someone tell my mistake and point me in the right direction?
Thanks.
I got it working: in the React Native code I changed the attribute accessibility_id={'FAQs'} to accessibilityLabel={'FAQ'}, and in the ruby test file the correct method is find_element(:accessibility_id, 'FAQs'). And it's working! Now I can .click() the button and continue testing.
https://github.com/appium/ruby_lib/blob/master/docs/android_docs.md to see what other functions we have available to use.