In the native page, if i touch any of the item in second list(after Header) i have to show the top(first list -in top) of the page. I have tried this.refs.listRef.scrollTo({x: 0, y: 0, animated: true}), but it didn't solve my problem
<Content>
<ScrollView ref="listRef">
<View style={{backgroundColor:'#e0e0e0'}}>
{InvoiceStore.invoice_response2==2?<View>
{InvoiceStore.invoice.length>0?
<View style={{width:deviceWidth-(deviceWidth/50),
padding:deviceWidth/70,alignSelf:'center',backgroundColor:'white',elevation:5,marginTop:deviceHeight/60,marginBottom:deviceHeight/60}}>
<List dataArray={InvoiceStore.invoice.slice()}
renderRow={(data) =>((data.length!=0)?<ListItem>................................................................................................................................................................... </ListItem>
:<View></View>)}>
</List>
</View>
:<View></View>}
</View>:<Spinner/>}
</View>
<Header style={{backgroundColor:'#d0964b',height:30}}>.......</Header>
{InvoiceStore.invoice_response2==2?<View>
{InvoiceStore.invoice.length>0?
<View style={{width:deviceWidth-(deviceWidth/50),
padding:deviceWidth/70,alignSelf:'center',backgroundColor:'white',elevation:5,marginTop:deviceHeight/60,marginBottom:deviceHeight/60}}>
<List dataArray={InvoiceStore.invoice.slice()}
renderRow={(data) =>((data.length!=0)?<ListItem>................................................................................................................................................................... </ListItem>
:<View></View>)}>
</List>
</View>
:<View></View>}
</View>:<Spinner/>}
</ScrollView>
In the secon list i have scrolled to the bottom , the above list and Headers are hidden from display. If i click any of the item in the second list that data are visible in the page start (first list ) , for that I have scroll the screen to top on Item click.
is there any other way....
It just worked after removing Container, Content components
Related
I am trying to use svelte-chartjs with chartjs-plugin-zoom. In order to programmatically adjust zoom. In order to do this you have to bind onto the element. This can be illustrated in the React-ChartJS-2 - see buttons below.
Is there a prop in svelte-chartjs to make that binding?
Something like:
<Line chartRef={myrefvar} {options} />
Use bind:property (tutorial) to get the chart reference ยป REPL
<script>
...
let chartRef
const onZoomPluse = () => {
chartRef.zoom(1.1);
};
</script>
<Line bind:chart={chartRef} options={options} data={data} />
<button on:click={onZoomPluse}>zoom +10%</button>
create product stack navigation having two screen product and check out
const ProductStack = createStackNavigator();
function ProductStackNavigation() {
return (
<ProductStack.Navigator initialRouteName="Product">
<ProductStack.Screen
name="Product"
options={{
headerTitle: "Product",
headerShown: true,
}}
component={Product} />
<ProductStack.Screen
name="CheckOut"
options={{
headerTitle: "CheckOut",
headerShown: true,
}}
component={CheckOut} />
</ProductStack.Navigator>
)
}
---
**create other favourite stack navigation having one screen favourite**
const FavouriteStack = createStackNavigator();
function FavouriteStackNavigation() {
return (
<FavouriteStack.Navigator initialRouteName="Favourite">
<FavouriteStack.Screen
name="Favourite"
options={{
headerTitle: "Favourite",
headerShown: true,
}}
component={Favourite} />
</FavouriteStack.Navigator>
)
}
create tab navigation conatain two stack first contain product stack and second contain favourite stack navigate from favourite screen to product screen
const BottomTab = createBottomTabNavigator();
function TabNavigation() {
return (
<BottomTab.Navigator
tabBarOptions={{
activeTintColor: '#fafafa',
labelStyle: { marginBottom: 10 }
}}
>
<BottomTab.Screen
name="product"
children={() => <ProductStackNavigation />}
options={{
tabBarLabel: 'product',
}}
/>
<BottomTab.Screen
name="Favourite"
children={() => <FavouriteStackNavigation />}
options={{
tabBarLabel: 'Favourite',
}}
/>
</BottomTab.Navigator>
)
}
how to navigate favourite screen to checkout screen inside favourite tab
You actually dont need to create "FavouriteStack". You can simply place the component Favourite in the BottomStack.Screen like this:
<BottomTab.Screen
name="Favourite"
component={Favourite}
options={{
tabBarLabel: 'Favourite',
}}
/>
And regarding navigation from Favourite to Checkout you can use useNavigation hook from "#react-natvigation/native"
const navigation = useNavigation();
and perform navigation using
navigation.navigate("ProductStack", {
screen:"Checkout"
})
Remember you need to have ProductStack as screen as well somewhere so that you can access that stack. You cant navigate to detached stacks from main navigation container. You can only switch the stacks using ternary operator.
isFavourite ? <FavouriteNavigator /> : <Productnavigator />
herein image the placeholder or input is not visible in TextInput I have tried everything including adjsuting the height of TextInput component but the input is not visible when i run expo in ios
this is my InputComponent
return (
<Modal visible={props.visible} >
<View style={styles.inputView}>
<TextInput placeholder="Course Goal" style={styles.input}
onChangeText={(enteredGoal)=>(setGoalHandler(enteredGoal))}
value={enteredGoal}/>
<View style={styles.inputButtons}>
<View style={styles.button}><Button title="Cancel"
color="red" onPress={props.changeModal}/></View>
<View style={styles.button}><Button title="Add" onPress={()=>
{props.onAddGoal(enteredGoal),
setEnteredGoal('')}}/></View>
</View>
</View>
</Modal>
)
}
apparently it's a bug, you can get around it by setting a color for the input
I have an accordion title that consists of the carat, some text, and a div with some other stuff. I want the accordion to only expand when the user clicks the carat or the text, but not the extra div. Clicking on the div will do something else entirely.
I noticed that in the base Semantic-UI, you can specify a CSS selector to trigger on, but that seems JQuery specific and not doable in the react version.
Is this possible?
<Accordion.Title
active={activeIndex === 0} index={0} onClick={this.handleClick}
>
<Icon name="dropdown" />
<span className="name">{data.name}</span>
<div>some extra junk - don't expand on this</div>
</Accordion.Title>
Your onClick event is attached to the Accordion.Title itself. That means when you click that component, your handleClick function will fire. If you want the handleClick function to fire when clicking the Icon then you need to move your handler function to that component instead.
<Icon
name='dropdown'
onClick={this.handleClick}
/>
ItemCommand contains RepeaterCommandEventArgs which has two important fields:
CommandName
CommandArgument
how to get Button event,get asp:DropDownList select values
<asp:FormView runat="server" id="fwHotelDetails" DataKeyNames="id" OnDataBound="fwHotelDetails_DataBound" OnModeChanging="fwHotelDetails_ModeChanging" >
<ItemTemplate>
<asp:Repeater runat="server" id="repScore">
<ItemTemplate>
<asp:DropDownList ID="ddlnumber" runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
</asp:DropDownList>
<asp:LinkButton ID="saveButton" runat="server" CausesValidation="False" CommandName="Edit" CommandArgument='<%# Eval("id")%>' Text="Edit" />
</ItemTemplate>
</asp:Repeater>
<EditItemTemplate>
Test test, anything??
</EditItemTemplate>
</ItemTemplate>
</asp:FormView>
The RepeaterCommandEventArgs argument contains a property called Item. From this property you can access the method FindControl().
So your code would look like this:
void repScore_ItemCommand(Object sender, RepeaterCommandEventArgs e) {
DropDownList ddl = (DropDownList)e.Item.FindControl("ddlNumber");
string selectedValue = ddl.SelectedValue;
}
Also, don't forget to wire up your repeater to handle the event:
<asp:Repeater ... OnItemCommand="repScore_ItemCommand" .... >