Am using 3.1.3.GA sdk, Alloys and 2.3.3 Android Emulator. I am using a TableView and whenever it is drawn am getting this error,
[ERROR][dalvikvm( 9798)] Could not find class ti.modules.titanium.ui.widget.searchview.TiUISearchView', referenced from method ti.modules.titanium.ui.widget.TiUITableView.processProperties
My Code,
slidingMenu.xml
<Alloy>
<View id="slidingMenu">
<TableView id="tableview" className='dataRows' onClick="actionToPerform">
<TableViewSection id="slidingSection">
<TableViewRow>
<ImageView id="option1"/>
<Label>Option</Label>
</TableViewRow>
<TableViewRow>
<ImageView id="option2"/>
<Label>Option</Label>
</TableViewRow>
<TableViewRow>
<ImageView id="option3"/>
<Label>Option</Label>
</TableViewRow>
<TableViewRow>
<ImageView id="option4"/>
<Label>Option</Label>
</TableViewRow>
<TableViewRow>
<ImageView id="option5"/>
<Label>Option</Label>
</TableViewRow>
<TableViewRow>
<ImageView id="option6"/>
<Label>Option</Label>
</TableViewRow>
</TableViewSection>
</TableView>
<View id="closer"></View>
</View>
</Alloy>
slidingMenu.tss
'#SlidingMenu': {
backgroundColor: 'transparent',
width: Ti.UI.FILL,
height: Ti.UI.FILL,
left: 0
},
'TableView': {
backgroundGradient: {
type: 'linear',
startPoint: {x: '0%',y: '0%'},
endPoint: {x: '0%',y: '100%'},
colors: [
{color: '#716E71',offset: '0.0'},
{color: '#716E72',offset: '1.0'}
]
},
width: '70%',
height: '100%',
left: 0,
separatorColor: '#E2E2E2'
},
'TableViewRow': {
height: '70'
},
'#option1': {
image: '/images/1.png'
},
'#option2': {
image: '/images/2.png'
},
'#option3': {
image: '/images/3.png'
},
'#option4': {
image: '/images/4.png'
},
'#option5': {
image: '/images/5.png'
},
'#option6': {
image: '/images/6.png'
},
'ImageView': {
left: '5%'
},
'Label': {
color: '#FFF',
left: '20%'
}
'#closer': {
backgroundColor: 'transparent',
width: '30%',
left: '70%'
}
index.xml
<Alloy>
<Window id="search" navBarHidden="true" exitOnClose="true">
<View>
<View id="mainView">
<Require src="views/searcher" id="searcher"></Require>
</View>
<View id="slidingView">
<Require src="views/slidingMenu" id="slidingMenu"></Require>
</View>
</View>
</Window>
</Alloy>
I will show TableView when the window is swiped and also tried keeping a button and removed swipe event. I dont know which part of code making the tableview to show this error. Please let know my mistake.
Related
Created by referring to https://snack.expo.io/rJBRhOLU-
const cardOne = require("../../image/doginfo-1.png");
const cardTwo = require("../../image/doginfo-2.png");
const cardThree = require("../../image/doginfo-3.png");
const cardFour = require("../../image/doginfo-4.png");
class AdvancedDeck extends Component {
constructor(props) {
super(props);
this.sate = {
cardIndex: 0,
swipedAllCards: false,
swipeDirection: "",
cards: [
{
text: "Card One",
name: "One",
image: cardOne
},
{
text: "Card Two",
name: "Two",
image: cardTwo
},
{
text: "Card Three",
name: "Three",
image: cardThree
},
{
text: "Card Four",
name: "Four",
image: cardFour
}
]
};
}
renderCard = (card, index) => {
return (
<Card style={{ elevation: 3 }}>
<CardItem>
<Left>
<Thumbnail source={card.image} />
<Body>
<Text>{card.text}</Text>
<Text note>NativeBase</Text>
</Body>
</Left>
</CardItem>
<CardItem cardBody>
<Image
style={{
resizeMode: "cover",
width: null,
flex: 1,
height: 300
}}
source={card.image}
/>
</CardItem>
<CardItem>
<IconNB name={"ios-heart"} style={{ color: "#ED4A6A" }} />
<Text>
{card.name}-{index}
</Text>
</CardItem>
</Card>
);
};
onSwipedAllCards = () => {
this.setState({
swipedAllCards: true
});
};
swipeLeft = () => {
this.swiper.swipeLeft();
};
render() {
return (
<Container style={styles.container}>
<Header>
<Left>
<Button transparent onPress={() => this.props.navigation.goBack()}>
<Icon name="arrow-back" />
</Button>
</Left>
<Body>
<Title>Advanced Deck Swiper</Title>
</Body>
<Right />
</Header>
<View style={{ flex: 1, padding: 12 }}>
<Swiper
ref={swiper => {
this.swiper = swiper;
}}
onSwiped={this.onSwiped}
onSwipedLeft={() => this.onSwiped("left")}
onSwipedRight={() => this.onSwiped("right")}
onSwipedTop={() => this.onSwiped("top")}
onSwipedBottom={() => this.onSwiped("bottom")}
onTapCard={this.swipeLeft}
cards={this.props.cards}
cardIndex={this.props.cardIndex}
cardVerticalMargin={80}
renderCard={this.renderCard}
onSwipedAll={this.onSwipedAllCards}
showSecondCard={false}
stackSize={3}
stackSeparation={15}
overlayLabels={{
bottom: {
title: "BLEAH",
style: {
label: {
backgroundColor: "black",
borderColor: "black",
color: "white",
borderWidth: 1
},
wrapper: {
flexDirection: "column",
alignItems: "center",
justifyContent: "center"
}
}
},
left: {
title: "NOPE",
style: {
label: {
backgroundColor: "black",
borderColor: "black",
color: "white",
borderWidth: 1
},
wrapper: {
flexDirection: "column",
alignItems: "flex-end",
justifyContent: "flex-start",
marginTop: 30,
marginLeft: -30
}
}
},
right: {
title: "LIKE",
style: {
label: {
backgroundColor: "black",
borderColor: "black",
color: "white",
borderWidth: 1
},
wrapper: {
flexDirection: "column",
alignItems: "flex-start",
justifyContent: "flex-start",
marginTop: 30,
marginLeft: 30
}
}
},
top: {
title: "SUPER LIKE",
style: {
label: {
backgroundColor: "black",
borderColor: "black",
color: "white",
borderWidth: 1
},
wrapper: {
flexDirection: "column",
alignItems: "center",
justifyContent: "center"
}
}
}
}}
animateOverlayLabelsOpacity
animateCardOpacity
swipeBackCard
/>
</View>
<View
style={{
flexDirection: "row",
flex: 1,
position: "absolute",
bottom: 50,
left: 0,
right: 0,
justifyContent: "space-between",
padding: 15
}}
>
<Button
style={{ backgroundColor: "black" }}
onPress={() => this.swiper.swipeBack()}
title="Swipe Back"
>
<Icon name="arrow-back" />
<Text>Swipe Left</Text>
</Button>
<Button iconRight onPress={() => this._deckSwiper._root.swipeRight()}>
<Text>Swipe Right</Text>
<Icon name="arrow-forward" />
</Button>
</View>
</Container>
);
}
}
export default AdvancedDeck;
How can I fix it?
I changed the code to contact-native-check-swiper to write back button because it did not turn into a back button while writing the existing default-base checkswiper.
Any answer is welcome. Please help me a lot.
The problem is with
<Swiper
...
cards={this.props.cards}
...
You've defined the cards in this.state = { cards: ... } instead
Right now I have a react-native-elements-header with a react-native-snap-carousel wrapped in a simple container as below:
render() {
return (
<View style={styles.container}>
<Header
outerContainerStyles={styles.header}
leftComponent={
<Text style={styles.heading}>{this.state.title}</Text>
}
rightComponent={
<Icon
name='account-circle'
color={COLOR_LIGHT_SECONDARY}
onPress={() => this.props.navigation.navigate('Settings')} />
}
/>
{this.cardCarousel}
</View>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 26,
height: 26,
},
container: {
flex: 1,
backgroundColor: "white",
},
containerCentered: {
justifyContent: 'center',
alignItems: 'center',
},
header: {
//flex: 2,
height: '15%',
},
heading: {
fontSize: TITLE,
fontWeight: 'bold',
color: THEME_COLOR,
},
card: {
backgroundColor: THEME_COLOR
}
});
and this.cardCarousel returns a carousel with pagination:
get cardCarousel() {
const { activeSlide, entries } = this.state;
var phoneWidth = Dimensions.get('window').width;
return (
<View style={styles.containerCentered}>
<Carousel
ref={(c) => { this._carousel = c; }}
data={entries}
renderItem={this._renderItem}
sliderWidth={phoneWidth}
itemWidth={phoneWidth*0.85}
/>
<Pagination
dotsLength={this.state.entries.length}
activeDotIndex={activeSlide}
containerStyle={{}}
dotStyle={{
width: 8,
height: 8,
borderRadius: 4,
marginHorizontal: 0,
backgroundColor: THEME_COLOR
}}
inactiveDotStyle={{
// Define styles for inactive dots here
}}
inactiveDotOpacity={1}
inactiveDotScale={0.6}
/>
</View>
);
}
However cardCarousel is overlayed on top of the header. I have tried many props for container and containerCentered but the cardCarousel is always overlaying header and is aligned from the top. What am I doing wrong here? I have also attached a screenshot below:
react-native-elements-header is absolute positioned element, because of header being absolutely positioned carousel is rendered on top of header.
check this once
https://github.com/react-native-training/react-native-elements/blob/8d4f85890bc37da64fa9712b166a92dd13b2e0a3/src/header/Header.js
<Header
outerContainerStyles={styles.header}
leftComponent={
<Text style={styles.heading}>{this.state.title}</Text>
}
rightComponent={
<Icon
name='account-circle'
color={COLOR_LIGHT_SECONDARY}
onPress={() => this.props.navigation.navigate('Settings')} />
}
/>
so give position relative for header outerContainerStyles.
<Header
outerContainerStyles={{position: "relative", height: "15%"}}
leftComponent={
<Text style={styles.heading}>{this.state.title}</Text>
}
rightComponent={
<Icon
name='account-circle'
color={COLOR_LIGHT_SECONDARY}
onPress={() => this.props.navigation.navigate('Settings')} />
}
/>
I make a chat app and I want to put the TextInput at the bottom of the page, but I can't manage to do it . If I try with position: 'absolute' + bottom: 0 the display is empty. I think I have a problem with a flex in my style , I'm not sure.
Here's my code for MessageScreen:
render() {
return (
<Wallpaper>
<KeyboardAvoidingView behavior='padding'>
<View>
<TextInput
style={styles.input}
onChangeText={text => this.setState({ message: text })}
// value={this.state.email}
placeholderTextColor='white'
underlineColorAndroid='transparent'
/>
<Button onPress={this.send} title='SEND' />
</View>
</KeyboardAvoidingView>
</Wallpaper>
);
}
}
const styles = StyleSheet.create({
text: {
color: 'white',
fontWeight: 'bold',
backgroundColor: 'transparent',
paddingLeft: 25
},
input: {
backgroundColor: 'rgba(255, 255, 255, 0.4)',
width: DEVICE_WIDTH ,
height: 40,
color: '#ffffff'
},
image: {
width: 40,
height: 40
}
});
Here's the Wallpaper:
render() {
return (
<Image style={styles.picture} source={require('src/components/images/wallpaper.png')}>
{this.props.children}
</Image>
);
}
}
const styles = StyleSheet.create({
picture: {
flex: 1,
width: undefined,
height: undefined,
resizeMode: 'cover'
}
});
try this.
<View style={styles.container}>
<KeyboardAvoidingView
style={{position: 'absolute', left: 0, right: 0, bottom: 0}}
behavior="position"
>
<TextInput
style={styles.input}
onChangeText={text => this.setState({ message: text })}
// value={this.state.email}
placeholderTextColor='white'
underlineColorAndroid='transparent'
/>
<Button onPress={this.send} title='SEND' />
</KeyboardAvoidingView>
</View>
working example can found here
is there a way to arrange this layout so that the image is on the left, and the button is on the right?
Right now, it just displays with the image at the top left, and the button that spans the whole width of the screen right below.
Thanks!
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>
Hello, Chat App!
</Text>
<Image
style={{width: 50, height: 50}}
source={getFunction(1)}
/>
<Button
style={{width: 50, height: 50}}
onPress={ () => navigate('Chat', { user: 'Abe', avatar: getFunction(1) })}
title = "Chat with Abe"
/>
<Image
style={{width: 50, height: 50}}
source={getFunction(2)}
/>
<Button
onPress={ () => navigate('Chat', { user: 'Jack', avatar: getFunction(2) })}
title = "Chat with Jack"
/>
<Image
style={{width: 50, height: 50}}
source={getFunction(3)}
/>
<Button
onPress={ () => navigate('Chat', { user: 'Kate', avatar: getFunction(3) })}
title = "Chat with Kate"
/>
);
}
}
You can try this:
The below code snippet is for alignment of one image and one button.
<View style={{ flex: 1, flex-direction: 'row', justifyContent: 'space-between' }}>
<View style={{ margin: 15 }} >
<Image style={{width: 50, height: 50}} source={getFunction(1)} />
</View>
<View style={{ margin: 15 }} >
<Button style={{width: 50, height: 50} onPress={ () => navigate('Chat', {
user: 'Abe', avatar: getFunction(1) })} title = "Chat with Abe" />
</View>
</View>
Cheers :)
Hi am new to titanium and cant get how to create a fluid design with its TSS. How to place three views, one as header(20%), two as content holder(60%) and three as footer(20%) with all width full(Ti.UI.FILL). My code is,
index.xml
<Alloy>
<Window class="container">
<Require src="home" id="home"></Require>
</Window>
</Alloy>
home.xml
<Alloy>
<View id="header"></View>
<View id="content"></View>
<View id="footer"></View>
</Alloy>
home.tss
"#home": {
layout: 'vertical',
width: Ti.UI.FILL,
height: Ti.UI.FILL,
backgroundColor: '#000'
},
'#header':{
layout: 'horizontal',
height: '20%',
width: Ti.UI.FILL,
backgroundColor: '#fff'
},
'#content': {
layout: 'vertical',
height: '60%',
width: Ti.UI.FILL,
backgroundColor: '#ccc'
},
'#footer': {
layout: 'horizontal',
height: '20%',
width: Ti.UI.FILL,
backgroundColor: '#fff'
}
What am trying is to place a back button(left), title(middle) and a refresh button(right) as horizontal layout in header view and app content in content view and in footer view with some choice with scrolling(ie, we can scroll using slide event by placing options on it). If I run this code views are eventually divided as like this and 60% not affected on the content view. I have asked in appcelerator forum and dint get replied yet. Hope this helps.
Your object with the id of 'home' isn't actually a view, it's just a reference to the home class and so you can't attribute styles to it like that.
I would have relaid home.xml out like this:
<Alloy>
<View id="homeHolder">
<View id="header"></View>
<View id="content"></View>
<View id="footer"></View>
</View>
</Alloy>
and then this would have work as you would have expected
"#homeHolder": {
layout: 'vertical',
width: Ti.UI.FILL,
height: Ti.UI.FILL,
backgroundColor: '#000'
}
Put this:
"#home": {
layout: 'vertical',
width: Ti.UI.FILL,
height: Ti.UI.FILL,
backgroundColor: '#000'
},
Inside index.tss, there is no element with id home inside home.xml, but there is one inside index.xml.
home.xml
<Alloy>
<View id="home">
<View id="header" visible="true">
<Label>header</Label>
</View>
<ScrollView id="content" visible="true">
<Label>content</Label>
</ScrollView>
<View id="footer" visible="true">
<Label>footer</Label>
</View>
</View>
</Alloy>
home.tss
"#home": {
layout: 'vertical',
width: Ti.UI.FILL,
height: Ti.UI.FILL,
backgroundColor: '#000'
},
'#header':{
layout: 'horizontal',
height: '20%',
width: Ti.UI.FILL,
backgroundColor: 'white',
},
'#content': {
layout: 'vertical',
height: '60%',
width: Ti.UI.FILL,
backgroundColor: '#ccc'
},
'#footer': {
layout: 'horizontal',
height: '20%',
width: Ti.UI.FILL,
backgroundColor: 'green',
}
index.xml
<Alloy>
<Window class="container">
<Require src="home" id="home"></Require>
</Window>
</Alloy>
This works. Thanks to Martyn.