I'm using Appcelerator Studio 4.7 with SDK 5.4.0GA.
I want to use swipe back gesture to return to previous view controller, but instead my touch just moves ScrollableView views even though I start my gesture at the left edge of the screen. Swipe back gesture works fine if it's not over ScrollableView.
Everything was fine when I have used Titanium Studio 3.4. It's not possible to use it at the moment, because it's not supported and you can't even log in.
This issue is because of Appcelerator Studio, not because of SDK version. I have tried to use Titanium Studio and Appcelerator Studio with the same SDK version and only Appcelerator Studio had this issue. That was the reason I stuck with Titanium Studio a year ago, but now it's not possible.
Here is the related topic without solution: https://archive.appcelerator.com/topic/581/swipe-right-from-the-edge-to-go-back-to-the-previous-window-doesn-t-work-anymore-in-ios-using-sdk-3-5-1-ga-and-4-0-0-ga/4
EDIT. How to reproduce it in 2 minutes:
1) File->New->Mobile App Project->Default Alloy Project
2) Add new controller named scrollable
scrollable.xml:
<Alloy>
<Window class="container">
<ScrollableView>
<ScrollView>
<View height="5000" backgroundColor="#DBD6D6">
<Label top="20">View1</Label>
</View>
</ScrollView>
<ScrollView>
<View height="5000" backgroundColor="#FED2FB">
<Label top="20">View2</Label>
</View>
</ScrollView>
<ScrollView>
<View height="5000" backgroundColor="#DCEFD7">
<Label top="20">View3</Label>
</View>
</ScrollView>
</ScrollableView>
</Window>
</Alloy>
index.js:
function doClick(e) {
var scrollableController = Alloy.createController('scrollable',{
});
var view = scrollableController.getView();
$.index.openWindow(view);
}
$.index.open();
index.xml:
<Alloy>
<NavigationWindow>
<Window class="container" id="index">
<Label id="label" onClick="doClick">Press me</Label>
</Window>
</NavigationWindow>
</Alloy>
3) That's all!
First of all, I have tried your code on Appcelerator Studio so I am not sure what used to happened on Titanium Studio in this scenario.
Now, since the Ti.UI.Window swipeToClose property does not exist until Ti SDK 5.2.0.GA, so you can make sure whether it's really Studio error or the SDK feature. I am sure that it's not an issue, but just a mis-understanding.
Coming to your query, there are two ways (as far as I know) to provide the Swipe to Previous Window (let's say SPW) feature along with Scrollable feature, that, leave some padding between the ScrollableView and its parent view, like this:
-Method 1-
<Alloy>
<Window class="container" backgroundColor="white">
<ScrollableView backgroundColor="blue" clipViews="false" left="20" right="20">
<View backgroundColor="red">
<Label>View1</Label>
</View>
<View backgroundColor="green">
<Label>View2</Label>
</View>
<View backgroundColor="cyan">
<Label>View3</Label>
</View>
</ScrollableView>
</Window>
</Alloy>
These are the changes I did in your code:
Added left + right padding of 20dp which will enable the SPW feature, but the ScrollableView will be of less width.
Set clipViews property to show the adjacent views for better UI. If you set this property to true even, then also the SPW feature works.
-Method 2- it works only if you know the exact dimension of ScrollableView by using hitRect property
// replace the line in Method 1 with this one and apply the tss on it
<ScrollableView backgroundColor="blue" id="SC">
scrollable.tss
"#SC" : {
// (x,y) is top-left corner of hitRect and height/width will determine its dimension where user can swipe the scrollable view
// on remaining area, you can perform SPW feature
hitRect : {
x : 100,
y : 100,
height : 200,
width : 200
}
}
Since you have seen both ways how you can achieve both features, I hope you find it useful.
Related
I've got a react native app -> I've currently noticed that the text on my screen overlaps on iphone 10+ devices. How would I create a safearea for the new devices?
I've tried to add a tag to wrap my stack.navigator for the home screen but had no luck so far.
Is this something I would target on my react native or in xcode?
enter image description here
use
import { SafeAreaView } from 'react-native';
to handle safe area I have shown in below code how to handle safe area for iPhone 10 plus device
in below code I have divided the safe area in two-part one is for top safe area and another is the bottom safe area and you place your all component in bottom safe area
render() {
return (
<View style={{flex: 1} >
<SafeAreaView style={{flex: 0}} />
<SafeAreaView style={{flex: 1}}>
//here you can place your component
</SafeAreaView>
</View>
)
}
I am currently trying to create an app using React native and I have multiple touchable opacity image buttons on different pages. However, whenever I click on any of the touchable opacity image buttons, it will ONLY work with a light tap/touch rather than a normal press on apps. I tried doing hit slop and it still doesn't avoid the issue of a light tap. Can someone please guide me on how to make this work as I have been stuck on this for days.
<TouchableOpacity
onPress={() =>
this.props.navigation.navigate("Track", {
currentDate: this.state.currentDate,
})
}
>
<Image
style={HomeStyles.ovalContainer}
source={require("../../assets/oval.png")}
/>
</TouchableOpacity>
Thank you
You can set the touch opacity
setOpacityTo((value: number), (duration: number));
or you can also try Pressable component for e.g.
<Pressable onPress={onPressFunction}>
<Text>I'm pressable!</Text>
</Pressable>
You can use also TouchableWihoutFeedback
<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
<MyComponent />
</TouchableWithoutFeedback>;
So I am new to React Native and am starting to wonder if this is even possible. I have my project setup for React Art - but I want to interact with the drawing objects I create with art.
Say there's one main view, within this view is a drawing surface. Within that surface, I render two different drawings using svg shapes and such. Is it possible for both of these drawings to be individually touchable within React Native?
Everything I try seems to screw up because you cant touch non native objects... how do I wrap my drawings so they are touchable?
If I cannot do this: How can I create svg drawings that can essentially act as buttons within my React Native app?
If you go here, which is where I began this foray into reactArt: http://browniefed.com/blog/2015/05/03/getting-react-art-running-on-react-native/
I basically want to take the VectorWidget drawn in this article and make it touchable.
Edit:
class cardboardtests extends Component {
_handlePress(data) {
console.log("asdf");
}
render() {
return (
<TouchableWithoutFeedback onPress={ this._handlePress("asdf") }>
<View>
<Surface
width = {width}
height = {height}
>
<CBCard/>
</Surface>
</View>
</TouchableWithoutFeedback>
);
}
}
I ran into same kind of issue when I was implementing a star rating component, where each star would be a svg component and unable to attach touch handler to them.
The way I fixed it is by wrapping that element with a Touchable component.
Somewhat like,
<TouchableWithoutFeedback onPress={__your_handler__}>
<View>
<Surface>
<Shape d={__svg_path__}>
</Surface>
</View>
</TouchableWithoutFeedback>
I am currently working on my very first react-native application and am wondering how that slide in effect of a new view can be achieved and where that "hidden" view should be placed.
My Application is currently build like this:
<View style={{flex:1}}>
<View style={{flex:.8, justifyContent:'center'}}>
.. some login Form
</View>
<View style={{flex:.2, justifyContent:'center', alignItems:'center'}}>
<TouchableHighlight onPress={this._toggleRegistryView}>
<Text> or register here </Text>
</TouchableHighlight>
</View>
</View>
As you can see in this basic code I want to slide-in the Registration View as soon as the touchable component is pressed.
Do I need to store the view "invisible" with a width of 0 and height of 100% on one side and then animate it to the full device width?
Right now I have no idea besides a whole new view render when the state changes
render(){
return({this.state.view == 'login' ? <LoginView /> : <RegistryView />});
}
Unfortunately this triggers a "hard" view change and not a smooth right to left or left to right animation where the view slides in.
If my question was unclear please inform me - I'll gladly try to specify it :) Thank you for your help
You should split your application into multiple scenes (screens) and use the Navigator component to transition between the scenes.
Here is a tutorial from the TaskRabbit blog to get you started.
Once you have you scenes set up, you can experiment with different SceneConfigs for different types of transition animations.
A transition from a page to another is nothing else but navigation.
In order to navigate from a page to another in React Native, you will want a navigation library.
The default Navigator component from React Native might work, but it's got a lot of limitations and issues, and the default solution most people turn to (and which after 3yrs of RN I strongly recommend), is React Navigation. If you are using Expo, it also ships by default, so you can jump right into it, and define your screens like so:
import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Login: {
screen: LoginView,
},
Register: {
screen: RegisterView,
},
});
export default createAppContainer(AppNavigator);
If not, here's a quick start guid to using it outside of Expo.
The problems statement is similar to this question
But I am looking for some pointers to implement the same with react-native.
I am building a chat window (like iMessage, whatsapp) where messages(ListView) come on top with a sticky footer containing a TextInput.
I am able to get a sticky footer, but when someone tries to enter text with TextInput in footer, the keyboard hides the TextInput. I tried approaches mentioned in this post, but none seem to work because of presence of ListView above.
Here is what my current layout code looks like:
<View style={styles.container}>
<ListView
automaticallyAdjustContentInsets={false}
keyboardDismissMode="on-drag"
keyboardShouldPersistTaps={true}
showsVerticalScrollIndicator={false}
/>
<View style={styles.textContainer}>
<TextInput/>
</View>
</View>