The widget that I have is working on other xml files..except for one...
The process goes like this...There's a view that when clicked, a window will open..
<Alloy>
<View class="vertical hsize">
<View class="hsize">
<Require src="actionbar" type="widget" />
</View>
<ScrollView class="container vertical whitebg">
<View class="downloadRowContainer horizontal">
<View class="downloadRow horizontal">
<View id="itemDl" onClick="viewItem" class="downloadItem graybg" />
<View class="divider" />
<View class="downloadItem graybg" />
</View>
</View>
<View class="downloadRowContainer horizontal">
<View class="downloadRow horizontal">
<View class="downloadItem graybg" />
<View class="divider" />
<View class="downloadItem graybg" />
</View>
</View>
</ScrollView>
</View>
</Alloy>
Here's the js:
function viewItem(e){
var showItem = Alloy.createController('viewdl').getView().open();
}
It works it opens viewdl.xml but the widget ain't working anymore on viewdl.xml alone.Any idea why?
Here's viewdl.xml(viewdl.js is blank):
<Alloy><Window class="vertical">
<View class="vertical hsize">
<View class="hsize"><Require src="actionbar" type="widget"/></View>
<ScrollView class="container vertical blackbg">
<View class="imgContainer"></View>
<View class="division"></View>
<Label>DOWNLOAD THIS WALLPAPER</Label>
</ScrollView>
</View></Window></Alloy>
Let me elaborate some points which I think are creating issues:
The root of the UI is Window or TabGroup or NavigationWindow/NavigationGroup : So these elements are responsible for opening and closing of the content/container in screen.
You can add some other View or its sub-element(Label,TableView,etc) to a window using add method.
IMO the widget should be added to the main container.
A simple example, let say we want 2 window application.
1st Window has a button which opens 2nd window.
2nd Window has 2 buttons
1st button close the current window.
2nd button loads some other view ( xml file ) to current window.
index.xml
<Alloy>
<Window id="first" layout="vertical" >
<Require src="actionbar" type="widget" />
<Button onClick="openWin2" title="Open" />
</Window>
</Alloy>
index.js
function openWin2() {
Alloy.createController('window2').getView().open({fullscreen:false});
}
window2.xml
<Alloy>
<Window id="second" layout="vertical" >
<Require src="actionbar" type="widget" />
<Button onClick="closeWin" title="Close" />
<Button onClick="loadData" title="Load Data" />
<View id="dynamicView" height="100px" width="100px"></View>
</Window>
</Alloy>
window2.js
function closeWin() {
$.second.close();
}
function loadData() {
$.dynamicView.add(Alloy.createController('dynamicData').getView());
}
dynamicData.xml
<Alloy>
<Label >Winter is coming !!</Label>
</Alloy>
Hope it is helpful.
Related
I am using Grid with a View of fixed height 150 and a Row with the rest of the height
In the view i am showing a text input and in the Row i am showing a Webview
When i touch the input the keyboard opens and if i press the back button the app crashes
If i remove the webview and do the same the app is not crashing
<Grid>
<View style={styles.screenView}>
<ImageBackground
source={size(course.image_url) > 0 ? { uri: course.image_url } : logo}
resizeMode="cover"
style={styles.imageBackground}
>
......
</ImageBackground>
</View>
<View style={styles.screenView}>
<View style={styles.container}>
<TextInput
style={styles.reviewInput}
onChangeText={addReview.bind(props)}
placeholder="Your reviews about the course"
value={review}
multiline={true}
/>
</View>
<LoadingButton
isLoading={isLoading}
isFormDirty={size(review) > 0 ? false : true}
loadingText="Saving"
text="Save Review"
block={true}
color={Color.primaryText}
loaderColor="#FFFFFF"
textColor={styles.lightText}
style={styles.reviewButton}
onPress={saveReview.bind(props)}
/>
</View>
<Row>
<View style={styles.scroller}>
<WebView originWhitelist={['*']} source={{ html: courseDescription }} />
</View>
</Row>
</Grid>
Styles for webview:
scroller: {
flex: 1,
overflow: 'hidden',
},
There is only one Row area in your code. It means the whole thing. You should mark the area separately.
<Grid>
<Row size={9}>
<View>
...
</Row>
<Row size={1}>
<View style={styles.scroller}>
<WebView originWhitelist={['*']} source={{ html: courseDescription }} />
</View>
</Row>
</Grid>
I want to put Search Input between two View border,but half input hides behind another View.
Click Here To Show Image.
There are two views. One View's backgroundColor is purple and another view's backgroundColor is white.And half Input type is hide behind another view.
<Container>
<Header style={{ backgroundColor: "#635DB7" }}>
<Left>
<Button
transparent
onPress={() => this.props.navigation.navigate("DrawerOpen")}
>
<Icon name="ios-menu" />
</Button>
</Left>
<Right />
</Header>
<View style={{flex:1,zIndex:2}}>
<View style={{height:192,backgroundColor: "#635DB7"}}>
<View style={{position:'absolute',opacity: 1,flex:1,flexDirection:"row",marginTop:160}}>
<Input style={{flexDirection:"row",borderRadius:20,marginLeft:30,marginRight:30,backgroundColor:"#434353", zIndex: 2,opacity: 1}} placeholder="Search" />
</View>
</View>
<View style={{height:448,backgroundColor: "#ffffff",zIndex:1}}>
</View>
</View>
</Container>
Try to put the search bar as a last item in the container, and with absolute position. If that does not work, then you might have hit a bug in RN android, which does not support overflow:
https://github.com/facebook/react-native/issues/6802
https://github.com/facebook/react-native/issues/3198
I am using rn-viewpager
I want a view like this:
but I am getting it like this :
Here is my code:
<IndicatorViewPager
style={{flex:1,width:60}}
onPageSelected={(position) => this.onChangeRound(position)}
>
<View>
<Image style={{marginLeft:40,justifyContent:'center',
resizeMode:'center'}}
source={this.state.firstRound}
/>
</View >
<View>
<Image style={{marginLeft:40,justifyContent:'center',
resizeMode:'center' }}
source={this.state.secondRound}
/>
</View >
<View>
<Image style={{marginLeft:40,justifyContent:'center',
resizeMode:'center' }}
source={this.state.thirdRound}
/>
</View>
<View>
<Image style={{marginLeft:40,justifyContent:'center',
resizeMode:'center' }}
source={this.state.fourthRound}
/>
</View>
<View>
<Image style={{marginLeft:40,justifyContent:'center',
resizeMode:'center' }}
source={this.state.fifthRound}
/>
</View>
</IndicatorViewPager>
Please Ignore the 'SCROLL' text.
I want 2 images at a time in my screen one active and one inactive and on scrolling it should change. Here everything happens properly except (2 images come on one screen)
I'm trying to use NavigationBar from the Shoutem UI toolkit.
My code:
<Screen>
<NavigationBar centerComponent={<Title>TITLE</Title>}/>
<ListView
data={groupedData}
renderRow={this.renderRow}
loading ={this.state.loading}
onRefresh={this.getAllNewsfeed.bind(this)}
onLoadMore ={this.loadMoreData.bind(this)}
loadMoreSpinner={<Spinner/>} />
<Button onPress={this.onLogout.bind(this)}>
<Text>
LOGOUT
</Text>
</Button>
</Screen>
But NavigationBar always hidden, listview above NavigationBar. But when I try replace it to Title. It still work. But I don't want use Title because I want add button back or something else same that.
This PR solves it https://github.com/shoutem/ui/pull/104/files but somehow we have removed it from the theme. We are going to fix that in next release but until then you can help yourself by this:
<Screen>
<NavigationBar
style={{
container: {
position: 'relative',
width: Dimensions.get('window').width,
}
}}
centerComponent={<Title>TITLE</Title>}
/>
<ListView
data={groupedData}
renderRow={this.renderRow}
loading ={this.state.loading}
onRefresh={this.getAllNewsfeed.bind(this)}
onLoadMore ={this.loadMoreData.bind(this)}
loadMoreSpinner={<Spinner/>}
/>
<Button onPress={this.onLogout.bind(this)}>
<Text>
LOGOUT
</Text>
</Button>
</Screen>
After release you will just have to change style prop to:
<NavigationBar
styleName="inline"
centerComponent={<Title>TITLE</Title>}
/>
My onClick event seems to not be firing, I have a button inside a <ScrollView>, and it does not give me any response, so I was wondering if there is a way to track which object was clicked so I could do the styling to make my buttons clickable again.
<Alloy>
<Window class="container">
<View class="insideContainer">
<View layout="horizontal">
<ImageView id="minLogo" image="/images/homeLogo.png" ></ImageView>
<ScrollableView id="mainViewInterna">
<View id="MainWelcomeText" class="MainWelcomeText rowLayout">
<Label class="welcomeText">BEM VINDO</Label>
<Label class="welcomeText">[ Usuário ]</Label>
<View class="button-row" width="200dp" height="200dp">
<Label id="logoutButton" class="button" onClick="logout">Log Out</Label>
</View>
</View>
</ScrollableView>
</View>
</View>
</Window>
</Alloy>
The Function:
function logout(){
Ti.API.log('it works');
}
var logout = function() {
$.logoutButton.removeEventListener('click',logout);
console.log('logout');
};
$.logoutButton.addEventListener('click',logout);