This example works well at the preview but not at the android, iOS environment.

How-to Discussions
1 
<Panel Margin="0,15,0,25">
    <Grid ZOffset="2" Margin="10,0" RowCount="1" ColumnCount="5" ContentAlignment="Center">
        <Each Items="{signUpGradeNumber}">
            <Circle ux:Name="SignUpGradeCircle" Column="{level} - 1" Color="#d9d9d9" Width="35" Height="35" Alignment="Center">
                <RText Alignment="Center" TextAlignment="Center" Color="#FFF" Value="{level}">
                </RText>
                <WhileTrue Value="{level} <= {grade}">
                    <Change SignUpGradeCircle.Color="#00af8c" Duration="0.4" />
                </WhileTrue>
                <Clicked>
                    <Callback Handler="{onGradeChange}" />
                    <Set BarTimeline.TargetProgress="{width}" /> <-- here is the problem.
                </Clicked>
            </Circle>
        </Each>
    </Grid>
    <Rectangle Width="12.5%" ux:Name="SignUpMovableBar" Alignment="Left" CornerRadius="10" Height="12" Color="#8ddfbe">
        <Timeline ux:Name="BarTimeline" TargetProgress="0.25">
            <Change Target="SignUpMovableBar.Width" Easing="ElasticInOut" Duration="0.2">
                <Keyframe Value="12.5" Time="0.25" />
                <Keyframe Value="35" Time="0.5" />
                <Keyframe Value="50" Time="0.65" />
                <Keyframe Value="67.5" Time="0.85" />
                <Keyframe Value="100" Time="1" />
            </Change>
        </Timeline>
    </Rectangle>
    <Rectangle CornerRadius="10" Height="12" Color="#ededed" />
</Panel>

var grade = Observable(1);

var gradePolicy = Observable('Foundation certified only');
var signUpGradeNumber = Observable(
		{'level':1, 'width':0.25, 'policy':'Foundation certified only', 'active':true},
		{'level':2, 'width':0.5, 'policy':'Foundation certified only2', 'active':false},
		{'level':3, 'width':0.65, 'policy':'Foundation certified only3', 'active':false},
		{'level':4, 'width':0.85, 'policy':'Foundation certified only4', 'active':false},
		{'level':5, 'width':1.0, 'policy':'Foundation certified only5', 'active':false});
function onGradeChange(arg){
	grade.value = arg.data.level;
	gradePolicy.value = arg.data.policy;
}

Above code works well at preview environment but not at mobile environment with

java.lang.RuntimeException: Uno.NullReferenceException: Object reference was null

error. (Actually, the almost same code works well at all environment.)

<Set BarTimeline.TargetProgress="{width}" />

I have found above line is the problem, but I can’t find what is wrong because it works well at the preview environment.

How can I solve this problem?

2

Hi,

it’s impossible to help if you don’t post a complete reproduction that can be copy-pasted and run.

Currently, it looks like the data-bound {width} variable might not have calculated when it is required to be, but there’s no way to tell if that is so, since you are simply not showing the whole code.

Please make a complete, minimal repro and we’ll take it from there.